Android 开发过程中 WebView 的使用比较广泛,常用来加载网页,比如使用 WebView 加载新闻页面、使用 WebView 打开本应用的链接以及用 WebView 显示支付信息页面等,那么如何 Android 开发中如何与 WebView 中的内容进行交互呢,这种交互主要就是 Java 与 JavaScript 之间的互相调用。下面实现一下如何响应 WebView 中图片的点击事件:
- 关键方法
- 具体实现
- 显示效果
关键方法
1. setJavaScriptEnabled()
设置 WebView 是否支持 JavaScript 脚本,默认不支持。
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 对象的方法是有一定数量限制的。
具体实现
大致思路就是让 WebView 中的图片响应点击事件,然后调用 Android 界面来显示被点击的图片,实现步骤如下:
- WebView 设置支持 JavaScript 脚本;
- 创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法;
- 加载 WebView 中要显示的内容;
- 使用 addJavascriptInterface 方法将 Java 对象映射到 JavaScript 中;
- 在 JavaScript 中调用映射对象的方法,打开显示图片的 Activity;
- 调用 javaScript 中的方法。
第一步:
WebView 设置支持 JavaScript 脚本,如下:
第二步:
创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法,如下:
第三步:
加载 WebView 要显示的内容,这里加载 aasets 目录下的 HTML 文件,如下:
第四步:
使用 addJavascriptInterface 方法将 Java 对象映射到 JavaScript 中,如下:
第五步:
在 JavaScript 中查找 <img> 标签并在其点击事件里面调用其映射对象的方法打开显示图片的 Activity,如下:
第六步:
调用 JavaScript 里面的方法,为保证调用时 Java 对象还未注入到 JavaScript 中,应该页面加载完成时调用 javaScript 的方法,如下: