如何在JavaFX WebView中监听Vaadin组件触发的事件

根因说明 #

• getElementById返回null是因为Vaadin Flow采用客户端异步渲染逻辑，原生WebView的SUCCEEDED加载状态触发时，Vaadin前端引擎还未完成组件的DOM挂载，此时DOM树中不存在对应ID的元素。
• 直接给元素加监听不生效，是因为Vaadin的组件事件处理默认会阻止事件冒泡，且Vaadin虚拟DOM更新时会替换对应DOM节点，之前绑定的监听会直接丢失。

解决方案 #

方案1：JS桥接（最稳定，推荐） #

该方案通过两端约定的JS调用接口通信，不受Vaadin渲染逻辑影响：

1. Vaadin侧代码修改：在保存按钮原有点击逻辑末尾，主动触发全局JS回调

button.addClickListener(clickEvent -> {
    // 原有Vaadin侧保存业务逻辑
    // 新增：触发JS全局通知方法
    getUI().ifPresent(ui -> 
        ui.getPage().executeJs("window.vaadinFormSubmitSuccess()")
    );
});

2. JavaFX侧代码配置：先开启JS支持，再暴露Java回调对象到WebView的JS上下文

// 先开启WebView的JS支持
webEngine.setJavaScriptEnabled(true);
// 监听页面加载完成状态
webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
    if (newState == Worker.State.SUCCEEDED) {
        JSObject window = (JSObject) webEngine.executeScript("window");
        // 暴露Java桥接对象到JS上下文
        window.setMember("fxBridge", new Object() {
            // 该方法会被JS调用，执行JavaFX侧逻辑
            public void onFormSaved() {
                doSomeAction();
            }
        });
        // 绑定Vaadin调用的全局JS方法到桥接对象
        webEngine.executeScript("""
            window.vaadinFormSubmitSuccess = function() {
                fxBridge.onFormSaved();
            }
        """);
    }
});

方案2：无侵入事件委托（无需修改Vaadin代码） #

如果无法修改Vaadin侧代码，可以用事件捕获阶段监听全局点击，匹配按钮特征后触发回调：
在JavaFX的页面加载完成回调中新增如下逻辑即可：

webEngine.executeScript("""
    // 用捕获阶段监听，不受Vaadin冒泡阻止影响
    document.addEventListener('click', function(e) {
        // 根据按钮的实际特征调整匹配规则，比如类名、属性、文本内容
        if(e.target.tagName === 'BUTTON' && e.target.textContent.trim() === '保存') {
            fxBridge.onFormSaved();
        }
    }, true);
""");

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