WebView中Java与JavaScript的交互

> 原文首发于微信公众号：jzman-blog，欢迎关注交流！ Android 开发过程中 WebView 的使用比较广泛，常用来加载网页，比如使用 WebView 加载新闻页面、使用 WebView 打开本应用的链接以及用 WebView 显示支付信息页面等，那么如何 Android 开发中如何与 WebView 中的内容进行交互呢，这种交互主要就是 Java 与 JavaScript 之间的互相调用。下面实现一下如何响应 WebView 中图片的点击事件： 1. 关键方法 2. 具体实现 3. 显示效果 #### 关键方法 ##### 1. setJavaScriptEnabled() 设置 WebView 是否支持 JavaScript 脚本，默认不支持。 ```java public abstract void setJavaScriptEnabled(boolean flag); ``` ##### 2. addJavascriptInterface() 注入 Java 对象到 WebView 中，该对象将会被注入到 JavaScript 主框架的上下文中，允许使用映射的 Java 对象的名称从 JavaScript 访问该对象的方法，且只可以访问添加 @JavascriptInterface 注解的公共方法才可以从 JavaScript 中访问，可在 API level 17 以上使用这样使用。 如果 API level 16 以及更早的 API, 所有的公共方法(包括继承的)都可以从 JavaScript 访问，可能会出现页面重新加载前，Java 对象还未注入到 JavaScript 中的情况，导致调用 Java 方法无效果。 *重要声明*：该方法允许 JavaScript 控制应用程序，功能非常强大，但是如果 API level 16及更早的 API 版本将会存在一定的风险,比较安全的做法是该方法尽量在 Android 4.2 及以上版本使用该方法，如果是更低的版本 JavaScript 可以使用反射来访问所注入对象的公共字段，在 WebView 中使用该方法可能会有不受信任的内容被攻击者利用，让应用程序去执行 Java 代码，要注意线程安全,Java 对象的字段不可访问，Android 5.0 以上，所注入的 Java 对象的方法是有一定数量限制的。 ```java public void addJavascriptInterface(Object object, String name) {} ``` #### 具体实现 大致思路就是让 WebView 中的图片响应点击事件，然后调用 Android 界面来显示被点击的图片，实现步骤如下： 1. WebView 设置支持 JavaScript 脚本； 2. 创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法； 3. 加载 WebView 中要显示的内容； 4. 使用 addJavascriptInterface 方法将 Java 对象映射到 JavaScript 中； 5. 在 JavaScript 中调用映射对象的方法，打开显示图片的 Activity; 6. 调用 javaScript 中的方法。 ##### 第一步： WebView 设置支持 JavaScript 脚本，如下： ```java //设置支持JavaScript webSettings.setJavaScriptEnabled(true); ``` ##### 第二步： 创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法，如下： ```java /** * 与 javascript 通信的 Java 对象，提供 javascript 调用的方法 * Created by jzman on 2017/7/20 0020. */ public class AndroidInterface { private Context context; public AndroidInterface(Context context) { this.context = context; } /** * 添加注解 @JavascriptInterface * javascript 要调用的方法 */ @JavascriptInterface public void showImage(String imgUrl){ Intent intent = new Intent(); intent.putExtra("img",imgUrl); intent.setClass(context,ImageActivity.class); context.startActivity(intent); } } ``` ##### 第三步： 加载 WebView 要显示的内容，这里加载 aasets 目录下的 HTML 文件，如下： ``` //加载 assets 目录下的 HTML 文件 webView.loadUrl("file:///android_asset/index.html"); ``` ##### 第四步： 使用 addJavascriptInterface 方法将 Java 对象映射到 JavaScript 中，如下： ```java //注入Java对象并映射到JavaScript中 //参数(与JaveScript通信的对象，映射到JavaScript中的对象) webView.addJavascriptInterface(new AndroidInterface(this),"imageListener"); ``` ##### 第五步： 在 JavaScript 中查找 标签并在其点击事件里面调用其映射对象的方法打开显示图片的 Activity,如下： ```javascript ``` ##### 第六步： 调用 JavaScript 里面的方法，为保证调用时 Java 对象还未注入到 JavaScript 中，应该页面加载完成时调用 javaScript 的方法，如下： ```java //设置 WebViewClient 监听相关事件 webView.setWebViewClient(new WebViewClient(){ //页面加载完成回调该方法 @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); //保证页面加载完成后Java对象注入到JavaScript中 webView.loadUrl("javascript:findImg()"); } }); ``` #### 显示效果  源码请参考：[github](https://github.com/jzmanu/WebViewDemo/tree/master) 可以关注公众号：**jzman-blog**，一起交流学习。