JavaFX中JSBridge页面加载后失效，点击按钮却正常的问题

现象 #

在JavaFX 18.0.1的WebView环境中，页面内的以下调用方式无法触发JSBridge的stb.play()方法：

• 直接在脚本全局作用域执行stb.play("hello")
• window.onload回调内的stb.play("hello3")
• window.addEventListener('load')回调内的stb.play("hello4")

仅以下两种方式可以正常工作：

• 按钮点击触发的play()函数
• 延迟1秒执行的checkJSBridge()轮询方法

原因分析 #

JavaFX WebEngine的Worker.State.SUCCEEDED状态触发时机早于浏览器页面的window.onload事件完成时机。当你在State.SUCCEEDED回调中将stb挂载到window对象时，页面的window.onload及全局脚本已经执行完毕，此时这些代码中的stb对象尚未定义，导致调用失败。而按钮点击属于后续用户交互，延迟轮询则是等待stb挂载完成后再执行，因此可以正常调用。

解决方案 #

方案1：Bridge挂载后主动触发页面初始化逻辑 #

修改JavaFX端代码，在完成JSBridge挂载后，直接调用页面中预定义的初始化函数：

private WebEngine webEngine = webView.getEngine();
private Worker<?> engineWorker = webEngine.getLoadWorker();
private JSBridge bridge = new JSBridge();

@Override
public final void start(Stage stage) throws Exception {
    engineWorker.stateProperty().addListener((ObservableValue ov, Worker.State oldState, Worker.State newState) -> {
        if (newState == State.SUCCEEDED) {
            JSObject jsobj = (JSObject) webEngine.executeScript("window");
            jsobj.setMember("stb", bridge);
            // 主动调用页面初始化方法
            webEngine.executeScript("initAfterBridgeReady()");
        }
    });
}

页面端调整脚本，将原load事件内的逻辑迁移到初始化函数中：

<script>
    // 专门用于Bridge就绪后的初始化逻辑
    function initAfterBridgeReady() {
        stb.play("hello3");
        stb.play("hello4");
        stb.play("hello");
    }

    function play() {
        stb.play("hello2"); 
    }
</script>

方案2：优化页面端轮询逻辑 #

将原固定延迟的轮询改为间隔更短的定时检查，确保及时捕获Bridge就绪状态：

<script>
    function checkJSBridge(){
        if (typeof stb !== "undefined" && typeof stb.play === "function") {
            stb.play("WORK");
            clearInterval(bridgeInterval);
        }
    }
    // 每100ms检查一次，比1秒延迟更及时
    const bridgeInterval = setInterval(checkJSBridge, 100);

    function play() {
        stb.play("hello2"); 
    }
</script>

方案3：监听WebEngine更细粒度的加载状态 #

部分JavaFX版本支持监听Worker.State.DOCUMENT_LOADED状态，该状态触发时机更接近页面脚本环境就绪的时间，可以尝试替换State.SUCCEEDED：

if (newState == State.DOCUMENT_LOADED) {
    JSObject jsobj = (JSObject) webEngine.executeScript("window");
    jsobj.setMember("stb", bridge);
}

注意：该状态的兼容性需根据实际使用的JavaFX版本测试确认。

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