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 OS。

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

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

• How to get the JavaFx WebEngine to report errors in detail?
• WebConsoleListener IllegalAccessError in JavaFX 12

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

控制台：[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 集成到他们的网站中，以便在更广泛的客户端上使用它。

解决问题的示例 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 mailing list 并在此处发布有关此问题的消息，并链接回此问题。

或者，提交bug report against JavaFX。如果您这样做，我建议您参考 Mozilla 调整大小观察者测试页面和相关文档，而不是原始问题中的测试页面。

测试代码

必须使用来自：this answer to allow access to an internal com.sun.javafx implementation 的信息运行。

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