javafx webview 无法正确显示 html 页面

Question

当我测试这个示例程序时，webview 无法正确显示 html 页面。

1. 第一页（第一个圆圈）显示正确！但是..
2. 它应该每 10 秒更改一次页面，但事实并非如此。
3. 它应该显示图表（当您单击第二个圆圈时），但它没有。
4. 它应该显示显示图像（当您单击第三个圆圈时），但它没有。

这是我的配置： openjdk-17

<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-controls</artifactId>
    <version>17.0.0.1</version>
</dependency>
<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-web</artifactId>
    <version>17.0.0.1</version>
</dependency>
<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-fxml</artifactId>
    <version>17.0.0.1</version>
</dependency>

代码

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import javafx.stage.StageStyle;

public class Main extends Application {
    @Override
    public void start(final Stage pStage) {
        WebView lWebView = new WebView();

        lWebView.getEngine().setJavaScriptEnabled(true);
        lWebView.getEngine().load("http://it-topics.com/index3.html");
        
        VBox lVBox = new VBox(lWebView);

        pStage.setScene(new Scene(lVBox));
        pStage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

我的总体观点是让 webview 的工作方式与浏览器相同。有办法解决第 2、3 和 4 点吗？

Answer 1

测试环境背景

我进行了一些实验，以确定导致您报告的（至少部分）页面显示问题的原因。

对于我的测试，我使用的是 JavaFX 17.0.0.1，在 MS Surface Book 2 上运行 Eclipse Temurin 17 JDK 和 Windows 10 Pro 操作系统。

您的问题中的示例网页在 Chrome 94 中显示，没有出现您在问题中指出的问题，而在 JavaFX WebView 中则遇到了您在问题中指出的问题。

为了调试该问题，我向 Web 引擎添加了一个控制台侦听器，如最流行的答案所示：

• 如何让JavaFx WebEngine详细报告错误？
• JavaFX 12 中的 WebConsoleListener IllegalAccessError

执行此操作后，我看到控制台记录了以下错误：

控制台：[https://cdn.jsdelivr.net/npm/chart.js:13] ReferenceError：找不到变量：ResizeObserver

ResizeObserver 信息

经过一些研究，我发现 ResizeObserver 实现并不适用于所有浏览器实现。所以我猜它没有在 WebView 中实现。

来自 Mozilla 的 ResizeObserver 信息

• https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

来自 Mozilla 的 ResizeObserver 示例测试页（我不对示例中的奇怪文本消息负责）：

• https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html

在 WebView 中从 mozilla 加载示例页面证实了缺乏对 ResizeObserver 支持的问题，附加 WebConsoleListener 时会打印以下错误：

控制台：[https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html:110]不支持调整观察者大小！

如何解决

您可以通过 polyfill 将 ResizeObserver 功能添加到 WebView（或其他不支持该功能的浏览器）。

解决此问题的最佳方法是请求您正在使用的网站的开发人员将 ResizeObserver 的填充程序集成到他们的网站中，以使其能够在更广泛的客户端上使用。

解决该问题的示例 polyfill 是：

• ResizeObserver polyfill。

如果您下载正在使用的网站的源代码，并在其他项目之前将 polyfill JavaScript 导入页面中，那么您在问题中引用的大多数问题都会消失并在 WebView 上按预期工作：

1. 控制台中未显示有关 ResizeObserver 的错误。
2. 显示每 10 秒自动更改一次。
3. 单击第二个圆圈时会显示图表。
4. 当您单击第三个圆圈时，会显示图像（尽管该图像比我在 Chrome 上看到的大并且被剪裁）。

ResizeObserver 的 Polyfill javascript 源代码：

• https://github.com/que-etc/resize-observer-polyfill/blob/master/dist/ResizeObserver.js

提交 ResizeObserver 对 JavaFX WebView 支持的功能请求

如果您愿意，您可以为 JavaFX WebView 提交功能请求，请求调整观察者支持大小。

为此，您可以订阅 openjfx-dev 邮件列表 并在那里发布有关此问题的消息，链接回此问题。

或者，针对 JavaFX 提交错误报告。如果您这样做，我建议您参考 Mozilla Resize Observer 测试页面和相关文档，而不是您原始问题中的测试页面。

测试代码

必须使用以下信息运行：此答案以允许访问内部

com.sun.javafx

实现。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.stage.Stage;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import com.sun.javafx.webkit.WebConsoleListener;

public class WebViewPageLoad extends Application {
    @Override
    public void start(final Stage stage) {
        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();

        engine.getLoadWorker().exceptionProperty().addListener((ov, t, t1) ->
                System.out.println("Received exception: "+t1.getMessage())
        );

        WebConsoleListener.setDefaultListener((webViewReference, message, lineNumber, sourceId) ->
                System.out.println("Console: [" + sourceId + ":" + lineNumber + "] " + message)
        );

// test page from original question:        
        engine.load("http://it-topics.com/index3.html");
// test page for resize observer polyfill (functions as expected).        
//        engine.load("https://que-etc.github.io/resize-observer-polyfill/");
// canonical ResizeObserver test page from mozilla.        
//        engine.load("https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html");
// referencing a local hacked version of the it-topics.com index3.html.
//        engine.load(WebViewPageLoad.class.getResource("it.html").toExternalForm());

        VBox layout = new VBox(webView);

        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}