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

测试环境背景

我 运行 进行了一些实验，以确定是什么原因导致（至少部分）您报告的问题与您提供的页面的显示有关。

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

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

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

• How to get the JavaFx WebEngine to report errors in detail?

这样做后，我看到以下错误记录到控制台：

Console: [https://cdn.jsdelivr.net/npm/chart.js:13] ReferenceError: Can't find variable: 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 时打印了以下错误：

Console: [https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html:110] Resize observer not supported!

如何修复

您可以通过 polyfill.

将 ResizeObserver 功能添加到 WebView（或其他不支持该功能的浏览器）

修复它的最佳方法是请求您正在使用的网站的开发人员将 ResizeObserver 的 polyfill 集成到他们的网站中，以允许它在更广泛的客户端上使用。

修复该问题的示例 polyfill 是：

• ResizeObserver polyfill.

如果您下载您正在使用的网站的源代码并在其他项目之前在页面中导入 polyfill JavaScript，那么，您在问题中提到的大部分问题都会消失并按预期工作网络视图：

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

Polyfill javascript ResizeObserver 的来源：

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

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

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

为此，您可以订阅 openjfx-dev mailing list 和 post 那里关于此的消息，链接回这个问题。

或者，提交 bug report against JavaFX。如果您这样做，我建议您参考 mozilla resize observer 测试页和相关文档，而不是原始问题中的测试页。

测试代码

必须 运行 使用以下信息：.

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();
    }
}