原文首发于微信公众号: jzman-blog, 欢迎关注交流!
Android 开发过程中 webView 的使用比较广泛, 常用来加载网页, 比如使用 WebView 加载新闻页面, 使用 WebView 打开本应用的链接以及用 WebView 显示支付信息页面等, 那么如何 Android 开发中如何与 WebView 中的内容进行交互呢, 这种交互主要就是 Java 与 JavaScript 之间的互相调用. 下面实现一下如何响应 WebView 中图片的点击事件:
关键方法
具体实现
显示效果
关键方法
1. setJavaScriptEnabled()
设置 WebView 是否支持 JavaScript 脚本, 默认不支持.
- 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 对象的方法是有一定数量限制的.
public void addJavascriptInterface(Object object, String name) {}
具体实现
大致思路就是让 WebView 中的图片响应点击事件, 然后调用 Android 界面来显示被点击的图片, 实现步骤如下:
WebView 设置支持 JavaScript 脚本;
创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法;
加载 WebView 中要显示的内容;
使用 addJavascriptInterface 方法将 Java 对象映射到 JavaScript 中;
在 JavaScript 中调用映射对象的方法, 打开显示图片的 Activity;
调用 JavaScript 中的方法.
第一步:
WebView 设置支持 JavaScript 脚本, 如下:
- // 设置支持 JavaScript
- webSettings.setJavaScriptEnabled(true);
第二步:
创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法, 如下:
- /**
- * 与 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 对象并映射到 JavaScript 中
- // 参数(与 JaveScript 通信的对象, 映射到 JavaScript 中的对象)
- webView.addJavascriptInterface(new AndroidInterface(this),"imageListener");
第五步:
在 JavaScript 中查找 标签并在其点击事件里面调用其映射对象的方法打开显示图片的 Activity, 如下:
- <script type="text/javascript">
- function findImg(){
- // 查找 img 标签
- var imgs = document.getElementsByTagName("img");
- // 遍历 img 标签
- for(var i=0; i<imgs.length; i++){
- // 为每一个标签设置点击事件
- imgs[i].onclick = function(){
- //imageListener 映射的 Java 对象
- Windows.imageListener.showImage(this.src);
- }
- }
- }
- </script>
第六步:
调用 JavaScript 里面的方法, 为保证调用时 Java 对象还未注入到 JavaScript 中, 应该页面加载完成时调用 JavaScript 的方法, 如下:
- // 设置 WebViewClient 监听相关事件
- webView.setWebViewClient(new WebViewClient(){
- // 页面加载完成回调该方法
- @Override
- public void onPageFinished(WebView view, String url) {
- super.onPageFinished(view, url);
- // 保证页面加载完成后 Java 对象注入到 JavaScript 中
- webView.loadUrl("javascript:findImg()");
- }
- });
显示效果
源码请参考: https://github.com/jzmanu/WebViewDemo/tree/master
可以关注公众号: jzman-blog, 一起交流学习.
来源: https://www.cnblogs.com/jzmanu/p/12649696.html