【WebView】WebView为图片添加点击事件

思路分析

• 首先我们拿到html中加载图片的标签img.

• 然后取出其对应的src属性

• 循环遍历设置图片的点击事件

• 将src作为参数传给java代码

• 在java回调方法中对界面进行跳转处理，用PhotoView加载大图实现，便于手势的操作

效果展示

[图片上传失败...(image-84c01-1533805276391)]

首先我们模拟加载百度的主页

        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("https://www.baidu.com/");

在界面加载完以后去给网页中的图片设置点击监听

//java回调js代码，不要忘了@JavascriptInterface这个注解，不然点击事件不起作用mWebView.addJavascriptInterface(new JsCallJavaObj() {            @JavascriptInterface
            @Override
            public void showBigImg(String url) {
                Toast.makeText(mContext, "圖片路勁"+url, Toast.LENGTH_SHORT).show();
                Intent intent = new Intent(mContext, BigImageActivity.class);
                intent.putExtra(Constants.IMG_URL,url);
                startActivity(intent);
            }
        },"jsCallJavaObj"); 
 mWebView.setWebViewClient(new WebViewClient(){            @Override
      public void onPageFinished(WebView view, String url) {                super.onPageFinished(view, url);
                setWebImageClick(view);
            }
        });         /**
     * 設置網頁中圖片的點擊事件
     * @param view
     */
    private  void setWebImageClick(WebView view) {
        String jsCode="javascript:(function(){" +                "var imgs=document.getElementsByTagName(\"img\");" +                "for(var i=0;i<imgs.length;i++){" +                "imgs[i].=function(){" +                "window.jsCallJavaObj.showBigImg(this.src);" +                "}}})()";
        mWebView.loadUrl(jsCode);
    }     /**
     * Js調用Java接口
     */
    private interface JsCallJavaObj{        void showBigImg(String url);
    }

其实要实现功能的核心就是这段Js代码，也就是jsCode这个变量。通过document对象的getElementsByTagName方法去获取到img标签。然后通过循环去遍历设置其对应的点击事件。

• window.jsCallJavaObj.showBigImg(this.src) 其中jsCallJavaObj是我们在java代码中所定义的一个接口的对象，showBigImg()是这个接口中的回调方法。this.src就是当前点击图片的url.

作者：On丶
链接：https://www.jianshu.com/p/5d7b999a3ed5