现在有很多时候，我们的 App 都进行了混合开发，而最简单，最常用的就是有些网页采用了 WebView 进行展示，这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下，如何点击 WebView 中的网页图片，调用原生控件进行放大展示。
其实实现这种交互非常简单，就是通过 JS 调用原生控件。基本思路如下：
- 首先加载一个 html 网页，网址或者本地 html 文件都可以。
- 遍历 html 标签源代码，找到所有的 img 标签节点。
- 给 遍历到得 img 标签节点加上 onClick 事件。
- 通过点击加上的 onClick 事件，通过 JS 调用原生控件，展示放大即可。
效果图
这是在线网址展示的效果图
这是本地 html 文件展示出的效果图
实现方法
html 文件
我们先写一个简单的 html 文件，里面放两张图片。源代码非常简单。代码如下：
代码语言：javascript复制<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://i2.sanwen8.cn/doc/1610/704-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://imgsrc.baidu.com/baikehttps://img.yuanmabao.com/zijie/pic/item/5fdf8db1cb134954a4d833a0534e9258d0094a34.jpg' />
</body>
<html>写的这个本地的 html 文件，放到 main/assets 目录下即可。
设置 WebView
这一步就是将我们写的 html 本地文件放入到 WebView 中。方法如下：
代码语言：javascript复制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");关键的代码是：
代码语言：javascript复制mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");这行代码就是 WebView 与 JavaScript 交互的关键。上面两个参数，一个是 JS 接口，一个是监听函数的名字。
遍历 img 节点，加入监听
代码语言：javascript复制 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); "
" } " "}" "})()");
}
});
}这里有行代码注意一下：
代码语言：javascript复制window.imagelistner.openImage(this.src); 这里就是给每个 img 节点加入点击事件，注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), “imagelistner”) 定义的方法名，而 openImage 就是我们自定义的 JavaScriptInterface 中的 openImage 方法。
通过 JS 接口，调用原生控件
代码语言：javascript复制 // 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 之间实现通信了。
