WebView動態註入JavaScript腳本

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

背景介紹

在Android與JavaScript交互一文中學習了原生和JS交互，但是如果我們想和別人開發好的web頁面交互呢，很明顯這個web端並沒有為我們定義好的jsBridge，就是很流氓的抓取其他網頁的數據。
完整的案例，功能如下圖，webview載入在如下網頁，當用戶點擊獲取驗證碼時，獲取用戶輸入的手機碼，同樣在其他頁面獲取用戶名和身份證號碼。

把終獲得的數據上傳雲伺服器結果如下

實現思路

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

本博文僅用於學習