设置 Webview 的图片的点击事件

2016-10-26 本文已影响226人 chauI

在 js 代码中设置每个图片的点击事件
页面的点击事件中，调用设置好的交互接口来触发 Activity 的方法

JAVA 中设置交互接口 connect

获取到 WebView 的实例后添加交互接口

webview.addJavascriptInterface(new JavascriptImgInterface(), "connect");

第一个参数是重写的一个内部类，第二个参数设置交互接口的名字。

重写内部类
这个类的名字和 addJavascriptInterface 的参数一样即可
在重写的内部类中，使用注解标示可以被 js 调用的方法

class JavascriptImgInterface{
        /**
         * 在 Android4.2 极其以上系统需要给提供 js 调用的方法前加入一个注解：@JavaScriptInterface;
         *  在虚拟机当中 Javascript 调用 JAVA 方法会检测这个 anotation，
         * 如果方法被标识 @JavaScriptInterface 则 Javascript 可以成功调用这个Java 方法，否则调用不成功。
         * @param img
         */
        @JavascriptInterface
        public void showImg(String img){
            //利用js传过来的参数得到图片的地址
            Intent intent = new Intent();
            intent.putExtra("ImageUrl", img);
            intent.setClass(ArticleActivity.this, ImageShowActivity.class);
            startActivity(intent);
        }
    }

JavaScript 设置页面的图片点击事件

遍历网页中 img 标签，设置 onclick 事件，

function findImg(){
    var objs = document.getElementsByTagName('img');     
    for(var i=0;i<objs.length;i++){
         objs[i].onclick=function(){
             window.connect.showImg(this.src)
          }
    }
}

在点击事件中， JavaScript 调用了

window.connect.showImg();

这里的 connect 是 JAVA 中设置的交互接口的名字， showImg() 是被 @JavascriptInterface 注释的方法，并且将图片的 src 传递到 JAVA 中

部分源码

这里的例子中，访问服务器后会返回一个 JSON，里面有网页的 body、css 字段，利用这些字段和自定义的 JavaScript，拼接成一个 HTML 传给 WebView

//在onCreate里

  //手动设置网页图片的点击事件
  String javascript ="function findImg(){"+
        "var objs = document.getElementsByTagName('img');"+
        "for(var i=0;i<objs.length;i++){"+
            "objs[i].onclick=function(){" +
                "window.connect.showImg(this.src)" +
            "}"+
        "}}";
  //拼接成一个完成的 HTML，
  String html = "<html><head><style type='text/css'>"+ css +"</style>" +
        "<script> " + javascript + " </script></head>"
        +"<body>"+ body +"</body></html>";

    webview.loadDataWithBaseURL(null,html, "text/html",  "utf-8", null);
    WebSettings webSettings = webview.getSettings();
    webSettings.setJavaScriptEnabled(true);// 启动js脚本
    webview.addJavascriptInterface(new JavascriptImgInterface(), "connect");

    webview.setWebViewClient(new WebViewClient(){
      @Override
      public void onPageFinished(WebView view, String url) {
          String call = "javascript:findImg()";
          webview.loadUrl(call);
          super.onPageFinished(view, url);
      }
});

//内部类
class JavascriptImgInterface{
   /**
         * 注意： 在Android4.2极其以上系统需要给提供js调用的方法前加入一个注释：@JavaScriptInterface;
         * 如果方法被标识@JavaScriptInterface则Js可以成功调用这个Java方法，否则调用不成功。
         * @param img
         */
       @JavascriptInterface
        public void showImg(String img){
            //利用js传过来的参数得到图片的地址
            Log.d("HERE", "showImg: "+img);
            Intent intent = new Intent();
            intent.putExtra("ImageUrl", img);
            intent.setClass(ArticleActivity.this, ImageShowActivity.class);
            startActivity(intent);
        }
    }

设置 Webview 的图片的点击事件

猜你喜欢

热点阅读