Android中 WebView控件支持JS与本地代码的交互。

// 是否允许在webview中执行javascript

webSettings.setJavaScriptEnabled(true);

//添加JS的接口名称

mWebView.addJavascriptInterface(this, "mobiletojs");

其主要分为两类:

1:JS调用本地代码

通过window.mobiletojs.saveLogin(username, password);

mobiletojs 对应 mWebView.addJavascriptInterface(this, "mobiletojs"); 中的接口名称

2：本地代码调用JS

在Activity中实现方法调用 mWebView.loadUrl("javascript:setUsername('ddd')");   即可实现对JS：设置用户名方法的调用

//Android 本地代码

 package com.whroid.commonapp.ui;

 import android.annotation.SuppressLint;

 import android.app.Activity;

 import android.os.Bundle;

 import android.util.Log;

 import android.webkit.WebSettings;

 import android.webkit.WebView;

 @SuppressLint("JavascriptInterface")

 public class WebViewJSUI extends Activity {

     public static final String TAG = "WebViewJSUI";

     private WebView mWebView;

     @Override

     public void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         mWebView = new WebView(this);

         setContentView(mWebView);

         WebSettings webSettings = mWebView.getSettings();

         // 是否允许在webview中执行javascript

         webSettings.setJavaScriptEnabled(true);

         // 为JS添加本地调用的接口 名称

         mWebView.addJavascriptInterface(this, "mobiletojs");

         // 加载网页

         mWebView.loadUrl("file:///android_asset/test_webview_js.html");

     }

     //页面点击登录时 由页面调用

     public void saveLogin(String username,String password)

     {

         Log.w(TAG, "调用登录：onLoin:"+username+" password:"+password);

     }

     //由代码调用页面js,实现对页面的编辑

     public void setUsername()

     {

         mWebView.loadUrl("javascript:setUsername('ddd')");

     }

     public String getUsername()

     {

         return "来自android 的用户名";

     }

     public String getPassword()

     {

         return "mobile password";

     }

 }

//对应的页面，以及相应的JS

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta name="generator"

     content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <title>title</title>

 <script language="javascript">

     function onLogin() {

         var username = document.getElementById("username").value;

         var password = document.getElementById("password").value;

         var userAgent = navigator.userAgent;

         var index = userAgent.indexOf("Android");

         if (index > 0) {

             window.mobiletojs.saveLogin(username, password);

         }

     }

     function setUsername(name) {

         document.getElementById("username").value = name;

     }

     function onInit() {

         var userAgent = navigator.userAgent;

         var index = userAgent.indexOf("Android");

         if (index > 0) {

             //调用android或者ios本地方法，获取用户名或密码

             var username = window.mobiletojs.getUsername();

             var password = window.mobiletojs.getPassword();

             document.getElementById("username").value = username;

             document.getElementById("password").value = password;

         }

     }

     //页面开始加载时，触发

     if (document.readyState == "complete") {

         onInit()

     } else {

         document.onreadystatechange = function() {

             if (document.readyState == "complete") {

                 onInit()

             }

         }

     }

 </script>

 </head>

 <body style="background-color: #ff0;">

     <table width="400" align="center">

         <tr>

             <td><input type="text" value="username" id="username" />

             </td>

             <input type="text" value="password" id="password" />

             <td></td>

         </tr>

         <tr>

             <td>

                 <div id="output">test</div> <input type="submit" value="提交"

                 onclick="onLogin()" /> <br />

                 <table width="400" align="center"></table>

             </td>

         </tr>

     </table>

 </body>

 </html>

Android Webview 与JS交互的更多相关文章

  1. [android] WebView与Js交互

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...

  2. webview与js交互（转）

    原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...

  3. Android中使用WebView与JS交互全解析

    1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发.为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,An ...

  4. webview与js交互

     对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...

  5. android Webview 实现js调用java代码实现Activity跳转

    今天有了一个需求,在android里webview加载的html页面,要求点击html页面的按钮实现Activity的跳转. 咱是是菜鸟,webview的接触不多,于是就和度娘来了次亲密接触.在其中也 ...

  6. webView和js交互

    与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...

  7. iOS webView与js交互在文本空格上输入文字

    项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...

  8. Android原生webview中js交互

    http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...

  9. 【Android开发】Webview 和 JS 交互问题

    一,安卓原生调用JS代码 1,js代码: function handlePasteDataFromApp(pasteStr) { showInfo('pasteData: aaaaa' + JSON. ...

随机推荐

  1. groups - 显示用户所在的组

    总览 (SYNOPSIS) groups [OPTION]... [USERNAME]... 描述 (DESCRIPTION) --help 显示此帮助, 然后退出 --version 显示版本信息, ...

  2. 新手 WordPress主题制作全过程

    WordPress主题制作全过程(一):基础准备 前言: 我想大多数使用WordPress的朋友都喜欢去尝试新的主题,但是换来换去,总是找不到那么一款适合自己的,让人很郁闷.于是很多人萌生了修改现有主 ...

  3. jquery源码学习第一天

    第一天认识了jquery的大体结构,总的大范围是 (function() { // 这里是封装的代码,包括了各种方法.工具 window.JQuery = JQuery window.$ = $; } ...

  4. JavaScript Dom编程艺术（1）

    Dom是一种可以供多种环境和多种程序设计语言使用的API: 一份文档就是一个节点树: 节电分为不同的类型:元素节点,属性节点,文档节点,元素节点分为属性节点和文档节点: getelementbyid( ...

  5. 拓展jQuery的serialize()，将form表单转化为json对象

    jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误, 原装的方法真的一 ...

  6. python 数据结构与算法之排序(冒泡,选择,插入)

    目录 数据结构与算法之排序(冒泡,选择,插入) 为什么学习数据结构与算法: 数据结构与算法: 算法: 数据结构 冒泡排序法 选择排序法 插入排序法 数据结构与算法之排序(冒泡,选择,插入) 为什么学习 ...

  7. Java Web系统常用的第三方接口

    1.    Web Service 接口 1.1 接口方式说明和优点 在笔者的开发生涯中,当作为接口提供商给第三方提供接口时,以及作为客户端去调用第三方提供的接口时,大部分时候都是使用 Web  Se ...

  8. python并发编程之进程2(管道,事件,信号量,进程池)

    管道 Conn1,conn2 = Pipe() Conn1.recv() Conn1.send() 数据接收一次就没有了 from multiprocessing import Process,Pip ...

  9. 运用Python制作你心目中的完美女神脸！

    简介 写这个项目的本来目的是通过构建一个神经网络来训练人脸图片,最后达到能根据图片自动判断美丑的效果.可能是因为数据集过小,或者自己参数一直没有调正确,无论我用人脸关键点训练还是卷积神经网络训练,最后 ...

  10. Java并发编程的艺术 记录（四）

    Java线程的状态: new :初始状态,但是还没调用start方法. runnable:运行状态. blocked:阻塞状态. waiting:等待状态,表示当前线程需要等待其他线程作出一些特定动作 ...