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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容