安卓: WebView点击图片展示大图

原生APP固然高效，灵活度却有所欠缺。因此 App 的混合开发愈加盛行，而最简单的方式就包括采用 WebView 进行展示某些网页。WebView 和 JS 的交互必不可少。今天就来说一个常见的情景：点击 WebView 网页中的图片，放大进行展示。

需求

点击WebView网页中的图片，进行放大查看。

分析

首先明确的是：这个工作可以交给web前端工程师去做，网页自行处理点击放大查看的操作。如果你足够懒的话，可以甩锅~ ~ 不过，一两个网页还好，多了的话，怕是web工程师要拿着板砖来商量了~ 保命的话，就得研究其它方法。
emm……可以单独新建一个 Activity 展示大图。那么还有两个问题：

1. 怎么获取webview中的图片地址？

略微有些html知识的人，都会知道，网页中几乎都是用 img 标签来展示图片，那么我们就可以通过【正则表达式】来获取到图片的地址。

2. 怎么判断点击了webview中的图片？

首先来讲，安卓已经把焦点给了webview，很难再判断是否点击了图片。相反，webview却可以通过【设置监听】的方法轻易实现，再通过 【WebView 和 js】 的交互就可以轻易判断。
因此在加载完成后自行添加入图片点击监听的代码，判断点击的时候，进行交互调用安卓方法即可。因为涉及到 js 交互，所以webview也需要使能相应设置。

简单分析，轻易可得实现步骤应该如下：

1. 初始化webview设置，加载网页。
2. 加载完成后，遍历 html 标签，找到所有的 img 标签节点。
3. 给 遍历到得 img 标签节点加上 onClick 事件。
4. 判断点击图片时，通过 JS 交互调用原生控件，放大展示。

实现

1. WebView 初始化

mWebView

WebView mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
// 使能 Js 交互
webSettings.setJavaScriptEnabled(true);
// 加载网页
mWebView.loadUrl("https://image.baidu.com/");
// 设置js交互接口
mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

// 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(context, ImageActivity.class);
        intent.putExtra("img", img);
        context.startActivity(intent);
    }
}

2. 遍历 img 节点，加入监听

javascript: (function() {
    var objs = document.getElementsByTagName("img");
    for (var i = 0; i < objs.length; i++) {
        objs[i].onclick = function() {
            window.imagelistner.openImage(this.src);
        }
    }
})()

   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].οnclick=function()  " + "    {  "
                        + "        window.imagelistner.openImage(this.src);  "
                        + "    }  " + "}" + "})()");
            }
        });
    }