Android在WebView中给图片设置点击事件_android webview 点击图片

好久没有更新博客了，今天来个小知识点。我们知道在WebView中加载的是Html也面，在开发中都是Web前端人员写好以后给个链接我们去用webView进行loadUrl。但是有时突然产品想让你把加载回来的图片进行大图的展示，比如单击或者长按查看大图，你是不是觉得产品在搞事情呢，明明界面不是你写的，逻辑代码你怎么改？？？其实没什么大不了的，世界上没有一行代码搞定不了的事，如果不行就来两行。遇事冷静，这也就是考你的应变能力的时候到了，有时候该谢谢产品的变态需求，无意间让你变成了大神。言归正传，其实这个问题所设计的知识点就是js和Java代码的互调。其实这也是考你js功底的时候，所以作为程序员h5也得学学，h5炫酷的交互都是用js脚本写的。

思路分析

• 首先我们拿到html中加载图片的标签img.
• 然后取出其对应的src属性
• 循环遍历设置图片的点击事件
• 将src作为参数传给java代码
• 在java回调方法中对界面进行跳转处理，用PhotoView加载大图实现，便于手势的操作

效果展示

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

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

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

//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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

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

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

举一反三

看到这个我就想到以前做乐视金融众筹的时候有个下载按钮问题，当时我用了js和java互调，测试是可以通的，但是h5界面中用ajax后按钮就没反应了，我希望有大神帮我回答一下ajax和java互调的这个问题。现在我觉得那个问题完全可以这么解决，“取标签，判属性，传参数，做操作”。其实在实际开发中还是要通过多条途径解决问题，不要一根筋，毕竟条条大路通北京嘛，海陆空通行。多途径的前提在于你自身知识面的广度和你的人际关系的处理。