WebView动态注入JavaScript脚本

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

背景介绍

在Android与JavaScript交互一文中学习了原生和JS交互，但是如果我们想和别人开发好的web页面交互呢，很明显这个web端并没有为我们定义好的jsBridge，就是很流氓的抓取其他网页的数据。
完整的案例，功能如下图，webview加载在如下网页，当用户点击获取验证码时，获取用户输入的手机码，同样在其他页面获取用户名和身份证号码。

image.png
把终获得的数据上传云服务器结果如下
抓取到的用户信息

实现思路

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});");
                }

---

本博文仅用于学习