webview与javascript交互实现图片点击缩放预览功能，修复部分机型（华为mate9）webview自动添加图片点击功能

先说下我在使用X5Webview中碰到的一个bug：在华为Mate9  Android8.0.0手机上webview会自动给Html中的图片添加上点击缩放事件。本来这也没什么，但是因为我项目中本来就要实现这个功能，导致图片会被打开两次，体验很不好，目前没在别的手机上发现相同的问题。

解决思路：先去掉自动添加的图片点击事件，然后再自己使用webview和js交互实现图片的点击缩放预览功能

先贴出解决上述bug的关键代码：

private void addImageClickListner(com.tencent.smtt.sdk.WebView webView) {
    //遍历页面中所有img的节点，因为节点里面的图片的url即objs[i].src，保存所有图片的src.
    //为每个图片设置点击事件，objs[i].onclick
    webView.loadUrl(
            "javascript:(function(){" +
                    "var objs = document.getElementsByTagName(\"img\"); " +
                    "for(var i=0;i<objs.length;i++)  " +
                    "{" +
                    "objs[i].addEventListener('click',function(e){" +//去掉默认点击事件
                    "e.preventDefault();" +
                    "});" +
                    "window.imageListener.readImageUrl(objs[i].src);  " +//添加图片集合
                    " objs[i].οnclick=function(){  " +
                    " window.imageListener.openImage(this.src);  " +//添加图片点击事件
                    "  }  " +
                    "}" +
                    "})()");
}

其中解决上述bug的关键代码就是注释中的去掉默认点击事件的代码：

objs[i].addEventListener('click',function(e){" +//去掉默认点击事件
"e.preventDefault();" +
"});

对了，我用的是腾讯出的X5Webview，原生的Webview应该一样

下面是实现webview与js交互实现图片点击预览保存功能的具体实现，已经会用的小伙伴可以忽略了。先上效果图：

先说用到的第三方库：

加载图片使用的是Glide

图片缩放用的是PhotoView：implementation 'com.github.chrisbanes:PhotoView:2.0.0'

首先需要自定义WebViewClient继承自com.tencent.smtt.sdk.WebViewClient（项目中我用的是腾讯的X5Webview，再次重申一次哈哈），在webview加载结束后添加图片的点击事件，就用到了与js交互：

public class MyWebViewClient extends com.tencent.smtt.sdk.WebViewClient {

    private static final String TAG = "MyWebViewClient";

    @Override
    public void onPageStarted(com.tencent.smtt.sdk.WebView webView, String s, Bitmap bitmap) {
        super.onPageStarted(webView, s, bitmap);
    }

    @Override
    public boolean shouldOverrideUrlLoading(com.tencent.smtt.sdk.WebView webView, String s) {
        //点击webView中的键接，依然在此webview中显示，而不跳转到别的浏览器
        webView.loadUrl(s);
        return super.shouldOverrideUrlLoading(webView, s);
    }

    @Override
    public void onPageFinished(com.tencent.smtt.sdk.WebView webView, String s) {
        super.onPageFinished(webView, s);
        addImageClickListner(webView);//当页面加载完成，就调用我们的addImageListener()函数
    }


    private void addImageClickListner(com.tencent.smtt.sdk.Web