现在有很多时候，我们的 App 都进行了混合开发，而最简单，最常用的就是有些网页采用了 WebView 进行展示，这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下，如何点击 WebView 中的网页图片，调用原生控件进行放大展示。

其实实现这种交互非常简单，就是通过 JS 调用原生控件。基本思路如下：

首先加载一个 html 网页，网址或者本地 html 文件都可以。

遍历 html 标签源代码，找到所有的 img 标签节点。

给 遍历到得 img 标签节点加上 onClick 事件。

通过点击加上的 onClick 事件，通过 JS 调用原生控件，展示放大即可。效果图

这是在线网址展示的效果图

这是本地 html 文件展示出的效果图

实现方法

html 文件

我们先写一个简单的 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");

//载入js

mWebView.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[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 之间实现通信了。

欢迎大家关注我的技术分享公众号：非著名程序员(smart_android)。技术文章均先首发于我的技术分享的微信公众号。