实现点击 WebView 中的图片，调用原生控件展示图片

来源：互联网发布：云计算100强编辑：程序博客网时间：2024/04/16 19:24

现在有很多时候，我们的 App 都进行了混合开发，而最简单，最常用的就是有些网页采用了 WebView 进行展示，这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下，如何点击 WebView 中的网页图片，调用原生控件进行放大展示。
其实实现这种交互非常简单，就是通过 JS 调用原生控件。基本思路如下：

1，首先加载一个 html 网页，网址或者本地 html 文件都可以。
2，遍历 html 标签源代码，找到所有的 img 标签节点。
3，给遍历到得 img 标签节点加上 onClick 事件。
4，通过点击加上的 onClick 事件，通过 JS 调用原生控件，展示放大即可。

实现方法
我们先写一个简单的 html 文件，里面放两张图片。源代码非常简单。代码如下：

<html>    <head>     <meta http-equiv="Content-Type" content="text/html; charset=GBK">    </head>    <body>    <h1>显示图片</h1>    <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585759664&di=56aa55f480140643a11c134ef8bdae07&imgtype=0&src=http%3A%2F%2Fi2.sanwen8.cn%2Fdoc%2F1610%2F704-161024211H3.jpg' style='vertical-align:middle;' />    <h1>第二张图片</h1>    <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585932299&di=9ab54209dc8672cdd45b817ba3b09000&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2F5fdf8db1cb134954a4d833a0534e9258d0094a34.jpg' />    </body><html>

写的这个本地的 html 文件，放到 main/assets 目录下即可。

设置 WebView

这一步就是将我们写的 html 本地文件放入到 WebView 中。方法如下：

 mWebView = (WebView) findViewById(R.id.webview);        WebSettings webSettings = mWebView.getSettings();        // 设置与Js交互的权限        webSettings.setJavaScriptEnabled(true);        // 设置允许JS弹窗        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);        //防止中文乱码        mWebView.getSettings().setDefaultTextEncodingName("UTF-8");        // 先载入JS代码        // 格式规定为:file:///android_asset/文件名.html//        mWebView.loadUrl("file:///android_asset/image.html");        mWebView.loadUrl("http://www.toutiao.com/a6401738581286682881/#p=1");        //载入js        mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

关键的代码是：

mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

这行代码就是 WebView 与 JavaScript 交互的关键。上面两个参数，一个是 JS 接口，一个是监听函数的名字。

遍历 img 节点，加入监听

 mWebView.setWebViewClient(new WebViewClient() {            @Override            public void onPageFinished(WebView view, String url) {                super.onPageFinished(view, url);                //这段js函数的功能就是注册监听，遍历所有的img标签，并添加onClick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去                mWebView.loadUrl("javascript:(function(){"                        + "var objs = document.getElementsByTagName(\"img\"); "                        + "for(var i=0;i<objs.length;i++)  " + "{"                        + "    objs[i].onclick=function()  " + "    {  "                        + "        window.imagelistner.openImage(this.src);  "                        + "    }  " + "}" + "})()");            }        });    }

这里有行代码注意一下：

window.imagelistner.openImage(this.src);

这里就是给每个 img 节点加入点击事件，注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 定义的方法名，而 openImage 就是我们自定义的 JavaScriptInterface 中的 openImage 方法。

通过 JS 接口，调用原生控件

// js通信接口    public class JavascriptInterface {        private Context context;        public JavascriptInterface(Context context) {            this.context = context;        }        @android.webkit.JavascriptInterface        public void openImage(String img) {            Intent intent = new Intent();            intent.putExtra("img", img);            intent.setClass(context, ImageActivity.class);            context.startActivity(intent);        }    }

这里的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 中的 new JavascriptInterface(this) 对应的。这样我们就通过 JavascriptInterface 就把 JS 和 WebView 之间实现通信了。

0 0