Android(安卓)webview加载html页面根据点击确定选中的控件

Android 的webview加载HTML页面时与JS的交互一直不大熟悉，此处仅针对页面的点击事件。

Android的webview加载的页面，在查看页面之后发现需要获取点击的元素中的图片信息，包括 img 的 src 或者 div 的backgroundImage等，当然也可以获取元素的其他的属性数据。

Android的 js 注入有两种方式

webView.evaluateJavascript(str, ValueCallback())

以及

webView.addJavascriptInterface(new MJavascriptInterface(), "imagelistener");

我会对这两种方式做出说明

对于 evaluateJavascript 这个方法不做过多的解释，需要了解的小伙伴可以去百度搜索了解一下。

首先根据我们的需要编写JS代码，然后用 WebStorm 随便写一个网页测试所编写的JS代码，以验证JS代码的准确性。

先上此次需要对页面的点击事件的监听，执行的JS 代码

window.onclick=function (event) {    console.log(event)};

打印 event 根据event的数据详情筛选我们需要的数据

点开数据详情，寻找需要获取的元素，发现 path属性下面保存的是对应的点击位置的所有的元素

元素的排序顺序为从内到外即 0 为最里面的一层,参考下图

点击打开对应的元素信息查看属性值，找到我们关心的值

确定值得获取当时为 event.path[0].src 以及 event.path[0].style.backgroundImage；如果需要获取其他的值请参考元素的打印的属性数据详情

修改JS代码

window.onclick=function (event) {    var src=event.path[0].src;    if(src!=null){        console.log(src)    }else {        var back=event.path[0].style.backgroundImage;        if(back!=null){            console.log(back)        }    }};

测试

打印的两行数据别属于 img 的 src 以及div 的 backgroundImage，确认js代码没有问题，下面开始两种方式的注入取值

1、webView.evaluateJavascript(str, ValueCallback()) 方式

注意：str对应的为一个JS的执行语句，如果是获取某个值的js代码那么在后面的 ValueCallback 中会返回得到的结果

例如：str=document.getElementById("test").className 那么在 ValueCallback 的public void onReceiveValue(String s) 方法中的 s 就是所要获取的 className ，对应的代码写法

String str="document.getElementById(\"test\").className";webView.evaluateJavascript(str, new ValueCallback() {    @Override    public void onReceiveValue(String s) {         //s 为对应语句 str获取到的结果    }});

但是我们此时需要执行的JS语句为 window.οnclick=function (event) { ...... }; 是一个方法，不是直接的获取数值的JS语句，所以此处我们不需要传递 ValueCallback() 直接用 null 代替，因为即使使用了 ValueCallback()，得到的值也始终为 null

看代码

String str=" window.onclick=function (event) {\n" +        "            var src=event.path[0].src;\n" +        "            if(src!=null){\n" +        "                console.log(src)\n" +        "            }else {\n" +        "                var back=event.path[0].style.backgroundImage;\n" +        "                if(back!=null){\n" +        "                    console.log(back)\n" +        "                }\n" +        "            }\n" +        "        };";webView.evaluateJavascript(str, null);

此处我们使用 console.log(s) 打印数据并重写 WebChromeClient() 的 onConsoleMessage 方法进行拦截，代码如下

webView.setWebChromeClient(new WebChromeClient(){    @Override    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {        String message=consoleMessage.message();        if(message!=null&&!message.equals("")&&!message.equals("null"))        Log.d(TAG, "onConsoleMessage: "+message);        return super.onConsoleMessage(consoleMessage);    }});

然后我们就可以获取到所要的数据了，可以在次做下一步的逻辑操作。

2、webView.addJavascriptInterface(new MJavascriptInterface(), "imagelistener");方式

首先在webview初始化的时候设置代码

webView.addJavascriptInterface(new MJavascriptInterface(), "imagelistener");

MJavascriptInterface() 的代码

public class MJavascriptInterface {    @android.webkit.JavascriptInterface    public void getImagePath(String img) {        Log.d("MainActivity","backgroundImage:"+img);    }    @android.webkit.JavascriptInterface    public void getImageSrc(String src) {        Log.d("MainActivity","src:"+src);    }}

新建一个类 SWebViewClient 继承自 WebViewClient，重写onPageFinished 以及 onPageStarted 方法：

public class SWebViewClient extends WebViewClient {    @Override    public void onPageFinished(WebView view, String url) {        view.getSettings().setJavaScriptEnabled(true);        super.onPageFinished(view, url);        getYSimage(view);    }        @Override    public void onPageStarted(WebView view, String url, Bitmap favicon) {        view.getSettings().setJavaScriptEnabled(true);        super.onPageStarted(view, url, favicon);    }    private void getYSimage(WebView webView) {        webView.loadUrl("javascript:window.onclick=function (event) {" +                "            var src=event.path[0].src;" +                "            if(src!=null){" +                "                 window.imagelistener.getImageSrc(src)" +                "            }else {" +                "                var back=event.path[0].style.backgroundImage;" +                "                if(back!=null){" +                "                      window.imagelistener.getImagePath(back)" +                "                }" +                "            }" +                "" +                "        };");    }}

webView.loadUrl（str）中的参数为需要注入的JS代码。window.imagelistener.getImageSrc(src) 中的 imagelistener 对应的是addJavascriptInterface(new MJavascriptInterface(), "imagelistener");中的第二个参数必须相同，window.imagelistener.getImageSrc(src)语句调用的是 MJavascriptInterface() 中的 getImageSrc(src)方法，window.imagelistener.getImagePath(back)语句调用的是 MJavascriptInterface() 中的 getImagePath(back) ，然后我们就可以在 MJavascriptInterface() 对应的方法中获取到我们需要的值了。

1、webView.evaluateJavascript(str, ValueCallback()) 方式

2、webView.addJavascriptInterface(new MJavascriptInterface(), "imagelistener");方式

更多相关文章

随机推荐