当前位置： 移动技术网 > IT编程>移动开发>Android > WebView动态注入JavaScript脚本

WebView动态注入JavaScript脚本

2018年08月08日  | 移动技术网IT编程  | 我要评论

欧文离开利物浦去了哪支球队,柜子设计,iene-300

背景介绍

在一文中学习了原生和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});");
                }

本博文仅用于学习

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网