WebView动态注入JavaScript脚本

Demo地址：https://gitee.com/chenyangqi/YouMeDai

背景介绍

在Android与JavaScript交互一文中学习了原生和JS交互，但是如果我们想和别人开发好的web页面交互呢，很明显这个web端并没有为我们定义好的jsBridge，就是很流氓的抓取其他网页的数据。

完整的案例，功能如下图，webview加载在如下网页，当用户点击获取验证码时，获取用户输入的手机码，同样在其他页面获取用户名和身份证号码。

WebView动态注入JavaScript脚本

把终获得的数据上传云服务器结果如下

实现思路

1.webview加载完后，打印HTML文本，定义到需要获取数据的dom节点

2.编写Javascript获取dom数据，并通过JSBridge返回Android端

3.Android通过WebView.loadUrl("javascript: js_str")注入编写好的js

1.打印Html文本

定义JavaScriptInterface

import android.util.Log;

import android.webkit.JavascriptInterface;

import cn.bmob.v3.exception.BmobException;

import cn.bmob.v3.listener.SaveListener;

public class MyJavaScriptBridge {

    @JavascriptInterface

    public void showSource(String html) {

        //TODO 打印HTML

        System.out.print(html);

    }

    @JavascriptInterface

    public void showDescription(String str) {

        //TODO 描述

    }

}

2.注入打印HTML文本的js

webView中页面加载完回调后注入javascript

 webView.setWebViewClient(new WebViewClient() {

            @Override

            public void onPageFinished(WebView view, String url) {

                    view.loadUrl("javascript:window.ANDROID_CLIENT.showSource("

                            + "document.getElementsByTagName('html')[0].innerHTML);");

                    view.loadUrl("javascript:window.ANDROID_CLIENT.showDescription("

                            + "document.querySelector('meta[name=\"share-description\"]').getAttribute('content')"

                            + ");");

                super.onPageFinished(view, url);

            }

        });

3.编写操作dom的js，注入webview中

上述可以在showSource()中打印html文本，将文本拷贝到本地，定位到dom的id，编写JavaScript操作dom获取数据再通过WebView.loadUrl("javascript: js_str")注入，完工直接看代码

如下是我写的js,监听button点击事件获取手机号码input内容，返回给android。

public void onPageFinished(WebView view, String url) {

                    // 注入Javascript实现监听点击事件获取电话号码的功能

                    view.loadUrl("javascript:\t$(document).ready(function () {\n" +

                            "\t\t$(\"#dtmbtn\").click(function () {\n" +

                            "\t\t\tvar phone = $(\"#mobile\").val();\n" +

                            "\t\t\tif (phone.length > 0) {\n" +

                            "\t\t\t\twindow.ANDROID_CLIENT.showLoginPhone(phone);\n" +

                            "\t\t\t} else {\n" +

                            "\t\t\t}\n" +

                            "\t\t});\n" +

                            "\t});");

                }

本博文仅用于学习

秒客网