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>