亲宝软件园·资讯

展开

WebView中Java与JavaScript的交互

躬行之 人气:2
> 原文首发于微信公众号: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()"); } }); ``` #### 显示效果 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190618002611413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p6bWFu,size_16,color_FFFFFF,t_70) 源码请参考:[github](https://github.com/jzmanu/WebViewDemo/tree/master) 可以关注公众号:**jzman-blog**,一起交流学习。 ![](https://img2020.cnblogs.com/blog/758808/202004/758808-20200406211915887-75390576.png)

加载全部内容

相关教程
猜你喜欢
用户评论