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

【转载】https://blog.csdn.net/jiang_rong_tao/article/details/58586041

思路分析

---

• 首先我们拿到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

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

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

  注意：上面的js代码书写一定不能有误，不然就做了无用功了，以javascript:（参数）开始，以（）结束。