教程

集成

日志记录

日志重定向

Chromium 功能

语音识别

监听 DOM 内容变化

本教程展示了如何构建一个小型 Java 应用程序，该程序监听加载到 JxBrowser 中的 HTML 页面发生的变化。

前提条件

为完成本教程，您将需要：

Git。
Java 17 或更高版本。
有效的 JxBrowser 许可证。可以是评估版或商业版。有关许可证的更多信息，请参阅许可指南。

创建项目

本教程示例应用程序的代码与其他示例一起，存储在一个基于 Gradle 的 GitHub 仓库中。

如果您想构建一个基于 Maven 的项目，请参考 Maven 配置指南。如果您希望从头开始构建一个基于 Gradle 的项目，请参考 Gradle 配置指南。

获取代码

要获取代码，请执行以下命令：

$ git clone https://github.com/TeamDev-IP/JxBrowser-Examples
$ cd JxBrowser-Examples/tutorials/content-changes

现在我们位于所有示例的根目录下。本教程的代码位于 tutorials/content-changes 目录下。

添加许可证

要运行本教程，您需要设置许可证密钥。

页面

我们将加载一个简单的 HTML 页面，在该页面上将显示一个每秒自动递增的计数器。

下面是计数器的代码：

<div>
  <span class="counter" id="counter"></span>
</div>

该计数器使用 jQuery 进行更新：

<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var counter = 1;
        setInterval(function() { $(".counter").text(counter++); }, 1000);
    });

</script>

以下是页面的完整代码，该代码作为名为 index.html 的资源文件包含在项目中:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
<div>
  <span class="counter" id="counter"></span>
</div>

<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var counter = 1;
        setInterval(function() { $(".counter").text(counter++); }, 1000);
    });

</script>
</body>
</html>

JavaScript 代码

由于我们希望从 HTML 代码中通知我们应用程序的 Java 代码，因此需要编写 JavaScript 代码来处理 DOM 修改并将其传递给我们的 Java 代码。我们本可以直接在 HTML 代码中完成此操作，但我们想展示如何从 Java 动态添加此类代码。

首先，我们获取要跟踪的元素:

const element = document.getElementById('counter');

然后，我们创建一个 MutationObserver 实例，并为其提供一个回调函数，用于将数据传递给 Java 代码。

const observer = new MutationObserver(
    function(mutations) {
        window.java.onDomChanged(element.innerHTML);
    });

这里最重要的部分是以下调用：

window.java.onDomChanged(element.innerHTML);

我们在这里引用存储在 window 对象中的一个对象，该对象的属性名为 java。java 是包含要调用的 Java 对象的属性的名称。我们使用 java 这个词来强调我们正在调用一个 Java 对象。这个属性可以是任何符合您应用程序意义的 JavaScript 标识符。

我们调用的对象方法是 onDomChanged()。稍后，当我们创建用于监听内容更改的 Java 类时，将添加此方法。我们传递计数器元素的 innerHTML 属性。因此，该方法将接受一个 String 参数。

现在，让我们告诉 observer 跟踪 DOM 的变化:

const config = {childList: true};
observer.observe(element, config);

以下是我们放置在资源文件中作为 observer.js 文件的完整 JavaScript 代码：

const element = document.getElementById('counter');
const observer = new MutationObserver(
    function(mutations) {
        window.java.onDomChanged(element.innerHTML);
    });
const config = {childList: true};
observer.observe(element, config);

Java 代码

加载资源的实用工具

在前面的部分中，我们审查了存储为资源的 HTML 和 JavaScript 代码。现在我们需要加载它们的代码。我们将使用 Guava 中的 Resources 来实现最简单的方法。

以下是我们稍后将使用的实用工具方法 load() 的代码:

private static String load(String resourceFile) {
    var url = ContentListening.class.getResource(resourceFile);
    try (var scanner = new Scanner(url.openStream(),
            Charsets.UTF_8.toString())) {
        scanner.useDelimiter("\\A");
        return scanner.hasNext() ? scanner.next() : "";
    } catch (IOException e) {
        throw new IllegalStateException("无法加载资源 " +
                resourceFile, e);
    }
}

创建 Browser 和 BrowserView

为了简化示例，我们将所有代码放在 main() 方法下。实际的应用程序会有更结构化的代码。

首先，我们需要创建一个 Engine 和 Browser：

var engine = Engine.newInstance(
        EngineOptions.newBuilder(HARDWARE_ACCELERATED).build());
var browser = engine.newBrowser();

然后，在 Swing 的事件分发线程（EDT）中，我们创建一个 BrowserView 和 JFrame。然后将新创建的 BrowserView 添加到 Frame 中。

SwingUtilities.invokeLater(() -> {
var view = BrowserView.newInstance(browser);

var frame = new JFrame("内容监听");
    frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    frame.add(view, BorderLayout.CENTER);
    frame.setSize(700, 500);
    frame.setLocationRelativeTo(null);
    frame.setVisible(true);
});

现在我们需要创建一个对象来监听 DOM 变化。

用于监听 DOM 变化的 Java 对象

您可能还记得，我们之前审查的 JavaScript 代码需要一个带有名为 onDomChanged() 的方法的对象，该方法接受一个 String 参数。

以下是该类的定义：

public static class JavaObject {

    @SuppressWarnings("unused") // Invoked by the callback processing code.
    @JsAccessible
    public void onDomChanged(String innerHtml) {
        System.out.println("DOM 节点已发生变化：" + innerHtml);
    }
}

现在我们需要让 JavaScript 代码与我们的 Java 对象进行通信。让我们开始吧。

连接 JavaScript 和 Java

为了让 JavaScript 代码与我们的 Java 对象进行通信，我们将实现一个 InjectJsCallback 将实例传递给 Browser.set()。

browser.set(InjectJsCallback.class, params -> {
var frame = params.frame();
var window = "window";
    JsObject jsObject = frame.executeJavaScript(window);
    if (jsObject == null) {
        throw new IllegalStateException(
                format("未找到 '%s' JS 对象", window));
    }
    jsObject.putProperty("java", new JavaObject());
    return Response.proceed();
});

在这段代码中，我们：

获取了 JavaScript window 对象的一个实例。
创建了一个监听内容变化的 Java 对象，并将其设置为名为 java 的属性添加到 window 对象中。前面在 JavaScript 代码中，我们使用 MutationObserver 来将数据传递给与此属性相关联的对象。

接下来，我们应该注册一个 FrameLoadFinished 事件监听器，该监听器将加载包含 MutationObserver 置的 JavaScript 代码，并让 Browser 执行该代码，在 DOM 模型准备就绪时完成 JavaScript 和 Java 之间的连接。

browser.navigation().on(FrameLoadFinished.class, event -> {
var javaScript = load("observer.js");
    event.frame().executeJavaScript(javaScript);
});

剩下的步骤是将页面加载到 Browser 中：

var html = load("index.html");
var base64Html = Base64.getEncoder().encodeToString(html.getBytes(UTF_8));
var dataUrl = "data:text/html;base64," + base64Html;
browser.navigation().loadUrl(dataUrl);

完整的 Java 代码

以下是完整的 Java 代码：


import static com.teamdev.jxbrowser.engine.RenderingMode.HARDWARE_ACCELERATED;
import static java.lang.String.format;
import static java.nio.charset.StandardCharsets.UTF_8;

import com.google.common.base.Charsets;
import com.teamdev.jxbrowser.browser.Browser;
import com.teamdev.jxbrowser.browser.callback.InjectJsCallback;
import com.teamdev.jxbrowser.browser.callback.InjectJsCallback.Response;
import com.teamdev.jxbrowser.engine.Engine;
import com.teamdev.jxbrowser.engine.EngineOptions;
import com.teamdev.jxbrowser.frame.Frame;
import com.teamdev.jxbrowser.js.JsAccessible;
import com.teamdev.jxbrowser.js.JsObject;
import com.teamdev.jxbrowser.navigation.event.FrameLoadFinished;
import com.teamdev.jxbrowser.view.swing.BrowserView;
import java.awt.BorderLayout;
import java.io.IOException;
import java.net.URL;
import java.util.Base64;
import java.util.Scanner;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;

/**
 * 这个示例演示了如何从一个 Java 对象监听 DOM 的变化。
 */
public final class ContentListening {

    public static void main(String[] args) {
        var engine = Engine.newInstance(
                EngineOptions.newBuilder(HARDWARE_ACCELERATED).build());
        var browser = engine.newBrowser();
        SwingUtilities.invokeLater(() -> {
            var view = BrowserView.newInstance(browser);

            var frame = new JFrame("内容监听");
            frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
            frame.add(view, BorderLayout.CENTER);
            frame.setSize(700, 500);
            frame.setLocationRelativeTo(null);
            frame.setVisible(true);
        });

        browser.set(InjectJsCallback.class, params -> {
            var frame = params.frame();
            var window = "window";
            JsObject jsObject = frame.executeJavaScript(window);
            if (jsObject == null) {
                throw new IllegalStateException(
                        format("未找到 '%s' JS 对象", window));
            }
            jsObject.putProperty("java", new JavaObject());
            return Response.proceed();
        });

        browser.navigation().on(FrameLoadFinished.class, event -> {
            var javaScript = load("observer.js");
            event.frame().executeJavaScript(javaScript);
        });

        var html = load("index.html");
        var base64Html = Base64.getEncoder().encodeToString(html.getBytes(UTF_8));
        var dataUrl = "data:text/html;base64," + base64Html;
        browser.navigation().loadUrl(dataUrl);
    }

    /**
     * 将资源内容加载为字符串。
     */
    private static String load(String resourceFile) {
        var url = ContentListening.class.getResource(resourceFile);
        try (var scanner = new Scanner(url.openStream(),
                Charsets.UTF_8.toString())) {
            scanner.useDelimiter("\\A");
            return scanner.hasNext() ? scanner.next() : "";
        } catch (IOException e) {
            throw new IllegalStateException("无法加载资源 " +
                    resourceFile, e);
        }
    }

    /**
     * 观察 DOM 变化的对象。
     *
     * <p>从 JavaScript 代码调用的类和方法必须是公开的。
     */
    public static class JavaObject {

        @SuppressWarnings("unused") // 由回调处理代码调用。
        @JsAccessible
        public void onDomChanged(String innerHtml) {
            System.out.println("DOM 节点已发生变化：" + innerHtml);
        }
    }
}

如果您运行该程序，您应该会看到带有计数器的 Browser 窗口，并且当 Browser 窗口中的计数器变化时，控制台会输出相应的信息。

总结

在本教程中，我们创建了一个小型 Java 应用程序，用于监听已加载网页中 DOM 的变化。

该应用程序由以下部分组成：

带有将要变化的 DOM 元素的 HTML 页面，并且我们知道该元素的 ID。
JavaScript 代码，使用 MutationObserver 来通知与 window 对象关联的 Java 对象。
监听 DOM 事件的 Java 对象。
Java 代码，向 Browser 实例添加 InjectJsCallback，加载网页，并使 Browser 实例执行 JavaScript 代码，使 MutationObserver 将变化传递给监听的 Java 对象。

DOM

SWT

HTML

集成