WebView控件点击图片事件

在WebView中加载的是Html也面，在开发中都是Web前端人员写好以后给个链接我们去用webView进行loadUrl。但是有时突然产品想让你把加载回来的图片进行大图的展示，比如单击或者长按查看大图，但是webView控件的点击事件并没有作用！！！以下是实现的思路

• 首先我们拿到html中加载图片的标签img.
• 然后取出其对应的src属性
• 循环遍历设置图片的点击事件
• 将src作为参数传给java代码

//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].onclick=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.

注意：上面的js代码书写一定不能有误，不然就做了无用功了，以javascript:（参数）开始，以（）结束。
原文链接：https://blog.csdn.net/Jiang_Rong_Tao/article/details/58586041