在开发中实现点击 WebView 中的图片,调用原生控件放大展示
现在有很多时候,我们的 App 都进行了混合开发,而最简单,最常用的就是有些网页采用了 WebView 进行展示,这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下,如何点击 WebView 中的网页图片,调用原生控件进行放大展示。
其实实现这种交互非常简单,就是通过 JS 调用原生控件。基本思路如下:
- 首先加载一个 html 网页,网址或者本地 html 文件都可以。
- 遍历 html 标签源代码,找到所有的 img 标签节点。
- 给 遍历到得 img 标签节点加上 onClick 事件。
- 通过点击加上的 onClick 事件,通过 JS 调用原生控件,展示放大即可。
效果图
这是在线网址展示的效果图
这是本地 html 文件展示出的效果图
实现方法
html 文件
我们先写一个简单的 html 文件,里面放两张图片。源代码非常简单。代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<h1>显示图片</h1>
<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585759664&di=56aa55f480140643a11c134ef8bdae07&imgtype=0&src=http%3A%2F%2Fi2.sanwen8.cn%2Fdoc%2F1610%2F704-161024211H3.jpg' style='vertical-align:middle;' />
<h1>第二张图片</h1>
<img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585932299&di=9ab54209dc8672cdd45b817ba3b09000&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2F5fdf8db1cb134954a4d833a0534e9258d0094a34.jpg' />
</body>
<html>
写的这个本地的 html 文件,放到 main/assets 目录下即可。
设置 WebView
这一步就是将我们写的 html 本地文件放入到 WebView 中。方法如下:
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();// 设置与Js交互的权限webSettings.setJavaScriptEnabled(true);// 设置允许JS弹窗webSettings.setJavaScriptCanOpenWindowsAutomatically(true);//防止中文乱码mWebView.getSettings().setDefaultTextEncodingName("UTF-8");// 先载入JS代码// 格式规定为:file:///android_asset/文件名.html
//mWebView.loadUrl("file:///android_asset/image.html");mWebView.loadUrl("http://www.toutiao.com/a6401738581286682881/#p=1");//载入jsmWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
关键的代码是:
mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
这行代码就是 WebView 与 JavaScript 交互的关键。上面两个参数,一个是 JS 接口,一个是监听函数的名字。
遍历 img 节点,加入监听
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//这段js函数的功能就是注册监听,遍历所有的img标签,并添加onClick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去
mWebView.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName("img"); "
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].onclick=function() " + " { "
+ " window.imagelistner.openImage(this.src); "
+ " } " + "}" + "})()");
}
});
}
这里有行代码注意一下:
window.imagelistner.openImage(this.src);
这里就是给每个 img 节点加入点击事件,注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”) 定义的方法名,而 openImage 就是我们自定义的 JavaScriptInterface 中的 openImage 方法。
通过 JS 接口,调用原生控件
// js通信接口
public class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img) {
Intent intent = new Intent();
intent.putExtra("img", img);
intent.setClass(context, ImageActivity.class);
context.startActivity(intent);
System.out.println(img);
}
}
这里的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”) 中的 new JavascriptInterface(this) 对应的。这样我们就通过 JavascriptInterface 就把 JS 和 WebView 之间实现通信了。
- 《笨办法学Python》 第8课手记
- 《笨办法学Python》 第7课手记
- python利用pysvn发布lib的小程序
- 《笨办法学Python》 第6课手记
- React Native之ViewPagerAndroid 组件
- 《笨办法学Python》 第5课手记
- psRobot:植物小RNA分析系统
- 《笨办法学Python》 第3课手记
- NGS基础 - 参考基因组和基因注释文件
- 关于Android PullTorefreshScrollview回到顶部实例
- 《笨办法学Python》 第2课手记
- 《笨办法学Python》 第1课手记
- 《笨办法学Python》 第40课手记
- 很经典的GDB调试命令,包括查看变量,查看内存
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法