Android WebView使用js与java交互(二)

2018-08-15 本文已影响46人 mm_cuckoo

Android WebView使用（一）
Android WebView使用js与java交互（二）
Android 和 IOS 使用 jsBridge 进行交互方法

前言

这篇中主要介绍Java与本地的Html 中的JS进行交互。

步骤

在布局文件中添加WebView控件。
获取到WebView实例。
调用setJavaScriptEnabled(true)方法设置支持JS。
调用addJavascriptInterface(Object object, String name) 方法加载javascript中的调用方法。
调用loadUrl(String url)方法加载本地的Html。
说明：加载本地的Html文件时，url 为 file:///android_asset/ + htmlname.html。 eg:mWebView.loadUrl("file:///android_asset/index.html");

API说明

addJavascriptInterface(Object object, String name)

参数说明：

第一个参数是一个包含html页面中调用方法的类.
第二个参数是调用类时的标记.

Javascript中调用Java 的规则：

Html中结构：

javascript: + name + . + method

说明：

javascript:是不变的，不要忘记冒号。
name:是在调用 addJavascriptInterface(Object object, String name)方法中设置的name,二者要保持对应。method:是调用的方法，method即调用方法中的方法名字。
eg：Java中有call 方法，在Html中js中
<a href='javascript:contact.call()'>拨打</a>，点击拨打便会调用Java 中的call 方法。

Java 中调用 Javascript 的规则：

Java中结构：
mWebView.loadUrl("javascript: + methodName('" + data + "')");
在此结构中只有methodName和data是变量，其他都为不可变的，照用即可。

methodName：是指Javascript中的方法
data：是指传入的数据。

在实际使用时重要注意问题

Android 4.2以后要加注释语句@JavascriptInterface
在Android 4.2之前向webview注入的对象所暴露的接口没有注释语句@JavascriptInterface，而4.2及以后的则多了注释语句@JavascriptInterface

经过查官方文档所知，因为这个接口允许JavaScript 控制宿主应用程序，这是个很强大的特性，但同时，在4.2的版本前存在重大安全隐患，因为JavaScript 可以使用反射访问注入webview的java对象的public fields，在一个包含不信任内容的WebView中使用这个方法，会允许攻击者去篡改宿主应用程序，使用宿主应用程序的权限执行java代码。因此4.2以后，任何为JS暴露的接口，都需要加.

在Android 较高版本中调用JavaScript 中方法的语句要在线程中运行。

// 调用javascript中的show（）方法
mHandler.post(new Runnable() {
    @Override
    public void run() {
        mWebView.loadUrl("javascript:show('" + json + "')");
    }
});

示例代码:

html 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   function show(jsondata){
      //[{name:"xxx",amount:600,phone:"13988888"},{name:"bb",amount:200,phone:"1398788"}]
           var jsonobjs = eval(jsondata);
           var table = document.getElementById("personTable");
           for(var y=0; y<jsonobjs.length; y++){
              var tr = table.insertRow(table.rows.length); //添加一行
              //添加三列
              var td1 = tr.insertCell(0);
              var td2 = tr.insertCell(1);
              td2.align = "center";
              var td3 = tr.insertCell(2);
              td3.align = "center";
              //设置列内容和属性
              td1.innerHTML = jsonobjs[y].name; 
              td2.innerHTML = jsonobjs[y].amount; 
              td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>"; 
         }
   }
</script>
</head>
<!-- js代码通过webView调用其插件中的java代码 -->
<body onload="javascript:contact.showContacts()">
   <table border="0" width="100%" id="personTable" cellspacing="0">
      <tr>
         <td width="35%">姓名</td><td width="30%" align="center">存款</td><td align="center">电话</td>
      </tr>
   </table>
   <a href="javascript:window.location.reload()">刷新</a>
</body>
</html>

Java代码：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    private Handler mHandler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.web_view);
        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.getSettings().setJavaScriptEnabled(true);

        mWebView.addJavascriptInterface(new JSObject(),"contact");

    }

    public class JSObject{
        @JavascriptInterface
        public void call(String phone){
            Log.e("phone", "phone---->" + phone);
        }

        @JavascriptInterface
        public void showContacts(){
            try {
                JSONArray jsonArray = new JSONArray();
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("name", "zhangsan");
                jsonObject.put("amount", "50");
                jsonObject.put("phone", "123465798");
                jsonArray.put(jsonObject);

                JSONObject jsonObject1 = new JSONObject();
                jsonObject1.put("name", "lisi");
                jsonObject1.put("amount", "48");
                jsonObject1.put("phone", "987456123");
                jsonArray.put(jsonObject1);

                final String json = jsonArray.toString();
                // 调用javascript中的show（）方法
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        mWebView.loadUrl("javascript:show('" + json + "')");
                    }
                });

            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}