Android Webview 与JS交互

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 本地代码

 1 package com.whroid.commonapp.ui;
 2 
 3 import android.annotation.SuppressLint;
 4 import android.app.Activity;
 5 import android.os.Bundle;
 6 import android.util.Log;
 7 import android.webkit.WebSettings;
 8 import android.webkit.WebView;
 9 
10 @SuppressLint("JavascriptInterface")
11 public class WebViewJSUI extends Activity {
12     public static final String TAG = "WebViewJSUI";
13     private WebView mWebView;
14 
15     @Override
16     public void onCreate(Bundle savedInstanceState) {
17         super.onCreate(savedInstanceState);
18         mWebView = new WebView(this);
19         setContentView(mWebView);
20         WebSettings webSettings = mWebView.getSettings();
21         // 是否允许在webview中执行javascript
22         webSettings.setJavaScriptEnabled(true);
23         // 为JS添加本地调用的接口 名称
24         mWebView.addJavascriptInterface(this, "mobiletojs");
25         // 加载网页
26         mWebView.loadUrl("file:///android_asset/test_webview_js.html");
27     }
28 
29     //页面点击登录时 由页面调用
30     public void saveLogin(String username,String password)
31     {
32         Log.w(TAG, "调用登录：onLoin:"+username+" password:"+password);
33     }
34     //由代码调用页面js,实现对页面的编辑
35     public void setUsername()
36     {
37         mWebView.loadUrl("javascript:setUsername('ddd')");
38     }
39     public String getUsername()
40     {
41         return "来自android 的用户名";
42     }
43     public String getPassword()
44     {
45         return "mobile password";
46     }
47 }

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

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta name="generator"
 5     content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7 <title>title</title>
 8 <script language="javascript">
 9     function onLogin() {
10         var username = document.getElementById("username").value;
11         var password = document.getElementById("password").value;
12 
13         var userAgent = navigator.userAgent;
14         var index = userAgent.indexOf("Android");
15         if (index > 0) {
16             window.mobiletojs.saveLogin(username, password);
17         }
18     }
19 
20     function setUsername(name) {
21         document.getElementById("username").value = name;
22     }
23 
24     function onInit() {
25 
26         var userAgent = navigator.userAgent;
27         var index = userAgent.indexOf("Android");
28         if (index > 0) {
29             //调用android或者ios本地方法，获取用户名或密码
30             var username = window.mobiletojs.getUsername();
31             var password = window.mobiletojs.getPassword();
32             document.getElementById("username").value = username;
33             document.getElementById("password").value = password;
34         }
35 
36     }
37 
38     //页面开始加载时，触发
39     if (document.readyState == "complete") {
40         onInit()
41     } else {
42         document.onreadystatechange = function() {
43 
44             if (document.readyState == "complete") {
45                 onInit()
46             }
47         }
48     }
49 </script>
50 </head>
51 <body style="background-color: #ff0;">
52     <table width="400" align="center">
53         <tr>
54             <td><input type="text" value="username" id="username" />
55             </td>
56             <input type="text" value="password" id="password" />
57             <td></td>
58         </tr>
59         <tr>
60             <td>
61                 <div id="output">test</div> <input type="submit" value="提交"
62                 onclick="onLogin()" /> <br />
63                 <table width="400" align="center"></table>
64             </td>
65         </tr>
66     </table>
67 </body>
68 
69 </html>