资讯专栏INFORMATION COLUMN

WebView动态注入JavaScript脚本

Brenner / 449人阅读

摘要:完整的案例,功能如下图,加载在如下网页,当用户点击获取验证码时,获取用户输入的手机码,同样在其他页面获取用户名和身份证号码。注入实现监听点击事件获取电话号码的功能本博文仅用于学习

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" +
                            "tt$("#dtmbtn").click(function () {n" +
                            "tttvar phone = $("#mobile").val();n" +
                            "tttif (phone.length > 0) {n" +
                            "ttttwindow.ANDROID_CLIENT.showLoginPhone(phone);n" +
                            "ttt} else {n" +
                            "ttt}n" +
                            "tt});n" +
                            "t});");
                }

本博文仅用于学习

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2849.html

相关文章

  • WebView中Java与JavaScript的交互

    摘要:下面实现一下如何响应中图片的点击事件关键方法具体实现显示效果关键方法设置是否支持脚本,默认不支持。如果以及更早的所有的公共方法包括继承的都可以从访问,可能会出现页面重新加载前,对象还未注入到中的情况,导致调用方法无效果。 原文首发于微信公众号:jzman-blog,欢迎关注交流! Android 开发过程中 WebView 的使用比较广泛,常用来加载网页,比如使用 WebView 加载...

    happyhuangjinjin 评论0 收藏0
  • WebView中Java与JavaScript的交互

    摘要:下面实现一下如何响应中图片的点击事件关键方法具体实现显示效果关键方法设置是否支持脚本,默认不支持。如果以及更早的所有的公共方法包括继承的都可以从访问,可能会出现页面重新加载前,对象还未注入到中的情况,导致调用方法无效果。 原文首发于微信公众号:jzman-blog,欢迎关注交流! Android 开发过程中 WebView 的使用比较广泛,常用来加载网页,比如使用 WebView 加载...

    xiguadada 评论0 收藏0
  • WebView中Java与JavaScript的交互

    摘要:下面实现一下如何响应中图片的点击事件关键方法具体实现显示效果关键方法设置是否支持脚本,默认不支持。如果以及更早的所有的公共方法包括继承的都可以从访问,可能会出现页面重新加载前,对象还未注入到中的情况,导致调用方法无效果。 原文首发于微信公众号:jzman-blog,欢迎关注交流! Android 开发过程中 WebView 的使用比较广泛,常用来加载网页,比如使用 WebView 加载...

    blastz 评论0 收藏0
  • PyQt5 内嵌浏览器注入 Javascript 脚本实现自动化操作

    摘要:概要应同学邀请,演示如何使用内嵌浏览器浏览网页,并注入脚本实现自动化操作。在默认配置中植入内容,这样脚本会在所有打开的网页中执行,不论跳转到哪个网址。脚本使用网址中的路径名,判断当前网页位置,从而决定执行哪种操作。 概要 应同学邀请,演示如何使用 PyQt5 内嵌浏览器浏览网页,并注入 Javascript 脚本实现自动化操作。 sg 原贴地址: 如何在Python利用runJavaS...

    xiguadada 评论0 收藏0
  • 浅谈小程序运行机制

    摘要:小程序的基础库不会被打包在某个小程序的代码包里边,它会被提前内置在微信客户端。小程序没有重启的概念当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后目前是分钟会被微信主动销毁当短时间内连续收到两次 写作背景 接触小程序有一段时间了,总得来说小程序开发门槛比较低,但其中基本的运行机制和原理还是要懂的。比如我在面试的时候问到一个关于小程序的问题,问小程序有window对象吗?...

    jsliang 评论0 收藏0

发表评论

0条评论

Brenner

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<