原文首发于微信公众号:jzman-blog,欢迎关注交流!

Android 开发过程中 WebView 的使用比较广泛,常用来加载网页,比如使用 WebView 加载新闻页面、使用 WebView 打开本应用的链接以及用 WebView 显示支付信息页面等,那么如何 Android 开发中如何与 WebView 中的内容进行交互呢,这种交互主要就是 Java 与 JavaScript 之间的互相调用。下面实现一下如何响应 WebView 中图片的点击事件:

  1. 关键方法
  2. 具体实现
  3. 显示效果

关键方法

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 界面来显示被点击的图片,实现步骤如下:

  1. WebView 设置支持 JavaScript 脚本;
  2. 创建与 JavaScrpt 通信的类及供 JavaScript 调用的方法;
  3. 加载 WebView 中要显示的内容;
  4. 使用 addJavascriptInterface 方法将 Java 对象映射到 JavaScript 中;
  5. 在 JavaScript 中调用映射对象的方法,打开显示图片的 Activity;
  6. 调用 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对象
window.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()");
}
});

显示效果

源码请参考:github

可以关注公众号:jzman-blog,一起交流学习。

WebView中Java与JavaScript的交互的更多相关文章

  1. Android中Java与JavaScript之间交互(转)

    Android代码: package com.fyfeng.testjavascript; import android.app.Activity; import android.content.In ...

  2. android webview与 java与javascript的交互

    webView.getSettings().setJavaScriptEnabled(true);//打开就可以用js的功能   webView.getSettings().setJavaScript ...

  3. 安卓中java和js如何交互

    1.安卓中java和js如何交互 在Android上怎样实现JAVA和JS交互呢?Android的webview是基于webkit内核的,webview中集成了js与java互调的接口函数,通过add ...

  4. webview中java与js交互

    WebView提供了在Android应用中展示网页的强大功能.也是目前Hybird app的大力发展的基础.作为Android系统的一个非常重要的组件,它提供两方面的强大的能力:对HTML的解析,布局 ...

  5. 让Java和JavaScript进行交互

    本篇博文参考自:http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/ 我们在使 ...

  6. Android WebView 总结 —— Java和JavaScript交互

    交互如何实现 实现Java和js交互十分便捷.通常只需要以下几步. WebView开启JavaScript脚本执行 WebView设置供JavaScript调用的交互接口. 客户端和网页端编写调用对方 ...

  7. Android 中Java和JavaScript交互入门

    如何实现JavaScript 和java 交互 实现Java和js交互十分便捷.通常只需要以下几步. WebView开启JavaScript脚本执行 WebView设置供JavaScript调用的交互 ...

  8. Android中Java和JavaScript交互

    Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本.本文将介绍如何实现Java代码和Javascript代码的相互调用. 如 ...

  9. C#中webbrowser与javascript(js)交互的方法

    今天在做一个项目的时候需要用c#搞一个webbrowser,然后有些地方还需要与js交互.所以就查了一下资料,发现很多博客提到了但是却没有说下具体的操作.所以我就写一下. 开发环境是Visual St ...

随机推荐

  1. 【JavaScript】DOM之表单操作

    DOM 表单操作 1.获取表单 获取表单元素 以Document对象中forms属性来获取当前HTML页面所有表单集合以Document对象中表单的name属性值来获取表单元元素 <body&g ...

  2. Yuchuan_Linux_C 编程之四动态库(共享库)制作

    一.整体大纲 二.共享库的制作 1. 命名规则: lib + 名字 + .so 2. 制作步骤: 1) 生成与位置无关的代码 (生成与位置无关的.o)    2) 将.o打包成共享库(动态库) 3. ...

  3. 微信APP生命周期、页面生命周期

    目录 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注 ...

  4. JavaScript的类数组

    类数组对象啊,被人问到它跟真正的数组对象有什么差别啊?说不上来就老埋汰了,只知道函数的arguments对象是个类数组对象,也有length属性,其他呢?干货奉上: 首先先说说数组吧: 1,当有新的元 ...

  5. 分享一次C#调用Delphi编写Dll程序

    1.前言: 最近接手了一个项目需要和Delphi语言编写的一个系统进行一些接口的对接,数据在传输过程中采用Des加密方式,因为Delphi 平台的加密方式和C#平台的加密方式不互通,所以采用的方式是C ...

  6. python学习-练习题9*9乘法表巩固

    9*9乘法表 分析: 1X1为一行 1X2 2X2 为一行 for i in range(1,10): for j in range(1,i+1): print(str(i) + 'X' + str( ...

  7. 网址封锁的几种方法 公司把 pan.baidu.com 封了 研究实现原理

    HTTP 和 HTTPS 协议HTTP 协议在 头部会发送 host 就是要访问的域名,可以用来被检测. HTTPS 协议虽然会加密全部通讯,但是在握手之前还是明文传输.有证书特证可被检测. 1, D ...

  8. 《即时消息技术剖析与实战》学习笔记12——IM系统如何提升图片、音视频消息发送、浏览的体验

    IM系统如何提升用户发送.浏览图片和音视频消息的体验呢?一是保证图片.音视频消息发送得又快又稳,二是保证用户浏览播放图片.音视频消息时流畅不卡顿. 一.提升用户发送图片.音视频的体验 1. 多上传接入 ...

  9. mysql实现读写分离

    MySQL读写分离概述 1.读写分离介绍 对于目前单机运行MySQL服务.会导致MySQL连接数过多.最终导致mysql的宕机.因此可以使用多台MySQL服务器一起承担压力.考虑到项目中读写比例的不一 ...

  10. 附014.Kubernetes Prometheus+Grafana+EFK+Kibana+Glusterfs整合解决方案

    一 glusterfs存储集群部署 注意:以下为简略步骤,详情参考<附009.Kubernetes永久存储之GlusterFS独立部署>. 1.1 架构示意 略 1.2 相关规划 主机 I ...