JavaFX WebView加载HTML页面异常：跳转、图表、图片功能失效

问题根因 #

OpenJFX 17.0.0.1内置的WebKit内核版本较旧，默认开启了多项安全限制，和现代浏览器的默认运行环境存在差异，因此会出现页面交互、图表渲染、资源加载类的异常。

修复方案 #

通用基础配置（可解决绝大多数交互异常） #

在你现有代码的lWebView.getEngine().setJavaScriptEnabled(true);行之后，添加以下配置：

import java.io.File;

// 开启JS弹窗权限
lWebView.getEngine().setJavaScriptCanOpenWindowsAutomatically(true);
// 配置本地缓存目录，支持localStorage、sessionStorage，解决页面状态缓存、JS定时器降频问题
lWebView.getEngine().setUserDataDirectory(new File(System.getProperty("java.io.tmpdir"), "webview-cache"));
// 模拟Chrome浏览器UA，避免网站对非浏览器请求做资源拦截
lWebView.getEngine().setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36");
// 关闭混合内容拦截，解决HTTP/HTTPS混合资源加载失败问题
System.setProperty("javafx.web.allowMixedContent", "true");
// 允许跨域请求头修改，解决跨域接口调用失败问题
System.setProperty("sun.net.http.allowRestrictedHeaders", "true");

// 可选：添加JS错误日志监听，方便定位具体异常
lWebView.getEngine().setOnError(event -> System.err.println("WebView错误：" + event.getMessage()));
lWebView.getEngine().setOnAlert(event -> System.out.println("JS提示：" + event.getData()));

针对性问题修复 #

1. 页面无法10秒自动切换

自动切换功能依赖JS的setInterval定时器，旧版本WebView会对后台标签页/非活跃页面的定时器做降频处理，添加上面的setUserDataDirectory配置后即可恢复定时器正常执行频率。如果仍有异常，可升级OpenJFX版本到17.0.11+或者21 LTS版本，新版本内核已经修复了定时器降频的bug。

2. 点击第二个圆点无法渲染图表

图表渲染失败大多是因为旧WebKit内核不支持ES6+新语法，或者对Canvas/SVG的渲染支持存在缺陷：

• 优先方案：升级所有OpenJFX依赖的版本到17.0.11或者21.0.2 LTS，两个版本的WebKit内核均做了大量兼容性优化，对主流图表库的支持度接近现代浏览器。
• 如果无法升级JFX版本，可要求前端开发同学在页面引入babel polyfill做语法兼容，或者将图表库替换为兼容性更好的低版本。

3. 点击第三个圆点无法加载图片

图片加载失败基本是跨域限制或者混合内容拦截导致的，添加上面的allowMixedContent和UA配置后即可解决，若仍有异常可排查前端是否配置了图片的跨域校验规则，适当放宽即可。 #

兜底方案 #

如果以上配置都无法满足和普通浏览器完全一致的运行要求，可替换JavaFX WebView为JCEF（Java Chromium Embedded Framework）组件，其基于完整的Chromium内核，兼容性和桌面版Chrome完全一致，不存在渲染、交互类的兼容问题。 #

内容的提问来源于stack exchange，提问作者Sylvain