在 Android 运行时访问浏览器的 DOM 内容答案

【问题标题】：Access DOM content of browser within Android runtime在 Android 运行时访问浏览器的 DOM 内容
【发布时间】：2019-12-11 18:34:59
【问题描述】：

假设我们有一个标准的登录页面，如下所示：

我们可以使用 jQuery 或普通的 JavaScript 像这样：

换句话说，获取网页中元素像素位置的方法很简单，就是使用element.getBoundingClientRect()：

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

因此我们可以从控制台或通过网络应用程序以编程方式执行此操作。

现在，假设我们在前台随时都有一个 Android 浏览器 (Chrome/Mozilla/WebView)。我可以在浏览器中检索网页的URL。在这种情况下：

https://login.microsoftonline.com/

所以我的问题是，给定登录页面的 URL，我如何类似地访问 Android browser 上的相同输入字段？

我需要能够在 Android 浏览器中访问网页的 HTML 元素，并计算其像素位置。作为输入，我在任何 Android 浏览器中都有网页的 URL。

我说的是在 Android 运行时内从 Android 应用程序执行此操作，即以编程方式使用 Java/JS 代码。

如果有人需要页面的 DOM 结构作为文本，可以使用以下 (Java) 代码以编程方式获取：

URL url;
HttpURLConnection urlConnection;
String DOMContent = null;

try {
    url = new URL("https://login.microsoftonline.com/");
    urlConnection = (HttpURLConnection) url.openConnection();
    int responseCode = urlConnection.getResponseCode();
    if(responseCode == HttpURLConnection.HTTP_OK){
        DOMContent = readStream(urlConnection.getInputStream());
    }

} catch (MalformedURLException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

我需要访问 Android 运行时中移动网页的 HTML 元素，就像我们在桌面浏览器中的网络应用或扩展程序中一样。或者换句话说，我需要能够从 Android 应用访问/操作移动浏览器的 DOM 内容。

如何做到这一点？

更新：

JavaScriptBridge 看起来很有希望。 DocumentBuilder 可以帮助我们将 DOM 转换为 Java 对象，然后可以从 Android 本地访问/操作。

参考文献：

1. How to execute JavaScript on Android?

2. Calling JavaScript functions in WebView

3. How to run Javascript code in a background Service on Android

4. Is there any way to get access to DOM structure in Android's WebView?

5. Android webview Access the DOM

6. In Android Webview, am I able to modify a webpage's DOM?

7. Android WebViews and the JavaScript to Java bridge

8. Using Javascript bridge in android

9. Alternative way for communication between WebView and native

【问题讨论】：

"并计算其像素位置" -- 它没有像素位置，因为它不在屏幕上。
@CommonsWare 我不知道您所说的“它不在屏幕上”是什么意思。我知道，它不是作为原生 Android 元素出现在屏幕上的。但可以肯定的是，它作为网页的一部分实际存在于设备屏幕上。如果我们可以在桌面浏览器上计算它的像素位置，我们应该同样能够在 Android 设备上这样做，至少在理论上是这样。
不是您在问题中显示的代码。您只是发出一个 HTTP 请求。没有 Web 浏览器或其他 Web 渲染引擎，更不用说屏幕了。
@CommonsWare：我将代码作为建议包含在内。如果有人需要 DOM 内容，我们可以使用网页的 URL 来获取。我输入的是 URL。
您首先需要渲染页面以了解元素位置。但是您可以将自己的内容注入到您正在呈现的 html 中（包括 JS 内容）。在这个内容中，你注入你的 JavaScript，它通过 JavaScript 桥调用原生 Android 方法，然后你传递一个 element.getBoundungrectangle 的值。这有更多信息stackoverflow.com/questions/38796319/…

标签： javascript android jquery html dom

【解决方案1】：

页面加载后使用以下代码（实现自定义WebViewClient并检查onPageFinished）

String query = "document.getElementById(\"WhateverElement\").getBoundingClientRect();"    

webView.evaluateJavascript(query, new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            Log.d("LogName", s); // s has the getBoundingClientRect
        }
    });

【讨论】：

这个答案不是问题的解决方案。问题是如何从 Android 运行时以编程方式访问移动浏览器的 DOM。就像我们在桌面浏览器中使用网络应用或扩展程序一样。
@Y.S 那是不可能的。祝你有美好的一天

【解决方案2】：

需要先渲染网页才能获取输入字段的像素位置。并且要在android中操作dom内容，最好的方法是使用JS Interface。 ZUN 提到的方法也很有帮助。无论哪种方式，您都可以在运行时执行任意 JavaScript。

但是，有一个特殊的库可以引起您的注意，即jsoup

来自 jsoup 网站：

jsoup 是一个用于处理真实世界 HTML 的 Java 库。它提供一个非常方便的 API，用于提取和操作数据，使用最好的 DOM、CSS 和类似 jquery 的方法。 jsoup 实现了 WHATWG HTML5 规范，并将 HTML 解析为与现代浏览器相同的 DOM。

旁注：如果您不想在所有计算完成之前向用户显示网页，您可能会对使用 WebView 的Visibility 感兴趣

【讨论】：