javafx - 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 点吗？

标签： javafxwebview

Answer 1

测试环境背景

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

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

您的问题中的示例网页在 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 集成到他们的网站中，以便在更广泛的客户端上使用它。

解决此问题的示例 polyfill 是：

• ResizeObserver 填充。

如果您下载您正在使用的网站的源代码并在其他项目之前在页面中导入 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 调整大小观察者测试页面和相关文档，而不是原始问题中的测试页面。

测试代码

必须使用以下信息运行：this answer to allow access to an internal com.sun.javafximplementation。

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