测试环境背景
我进行了一些实验，以确定导致您报告的（至少部分）页面显示问题的原因。
在我的测试中，我使用的是 JavaFX 17.0.0.1，在 MS Surface Book 2 上运行 Eclipse Temurin 17 JDK 和 Windows 10 Pro 操作系统。
您的问题中的示例网页在 Chrome 94 中显示，没有出现您在问题中指出的问题，而在 JavaFX WebView 中则遇到了您在问题中指出的问题。
为了调试该问题，我向 Web 引擎添加了一个控制台侦听器，如最流行的答案所示：
- 如何让JavaFx WebEngine报告详细的错误？ https://stackoverflow.com/questions/15522315/how-to-get-the-javafx-webengine-to-report-errors-in-detail
- JavaFX 12 中的 WebConsoleListener IllegalAccessError https://stackoverflow.com/questions/57167872/webconsolelistener-illegalaccesserror-in-javafx-12
执行此操作后，我看到控制台记录了以下错误：
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 https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
Mozilla 的 ResizeObserver 示例测试页（我不对示例中的奇怪文本消息负责）：
- https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html 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!
如何修复它
您可以通过以下方式将 ResizeObserver 功能添加到 WebView（或其他不支持该功能的浏览器）polyfill https://developer.mozilla.org/en-US/docs/Glossary/Polyfill.
解决这个问题的最佳方法是请求您正在使用的网站的开发人员将 ResizeObserver 的填充程序集成到他们的网站中，以使其能够在更广泛的客户端上使用。
解决该问题的示例 polyfill 是：
-
ResizeObserver 填充 https://www.npmjs.com/package/resize-observer-polyfill.
如果您下载正在使用的网站的源代码，并在其他项目之前将 polyfill JavaScript 导入页面中，那么您在问题中引用的大多数问题都会消失并在 WebView 上按预期工作：
- 控制台中不会显示有关 ResizeObserver 的错误。
- 显示每 10 秒自动更改一次。
- 单击第二个圆圈时会显示图表。
- 当您单击第三个圆圈时，会显示一个图像（尽管该图像比我在 Chrome 上看到的图像大并且被裁剪）。
ResizeObserver 的 Polyfill javascript 源代码：
- https://github.com/que-etc/resize-observer-polyfill/blob/master/dist/ResizeObserver.js https://github.com/que-etc/resize-observer-polyfill/blob/master/dist/ResizeObserver.js
提交 ResizeObserver 支持 JavaFX WebView 的功能请求
如果您愿意，您可以为 JavaFX WebView 提交功能请求，请求调整观察者支持大小。
为此，您可以订阅openjfx-dev 邮件列表 http://mail.openjdk.java.net/mailman/listinfo/openjfx-dev并在那里发布有关此问题的消息，链接回此问题。
或者，提交一份针对 JavaFX 的错误报告 https://wiki.openjdk.java.net/display/OpenJFX/Submitting+a+Bug+Report。如果您这样做，我建议您参考 Mozilla Resize Observer 测试页面和相关文档，而不是原始问题中的测试页面。
测试代码
必须使用以下信息运行：这个答案允许访问内部com.sun.javafx执行 https://stackoverflow.com/questions/57167872/webconsolelistener-illegalaccesserror-in-javafx-12.
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();
}
}
