Vaadin 23中浏览器返回按钮点击时弹出确认对话框的实现方法

嗨，这个需求我之前帮不少开发者处理过，在Vaadin 23里实现这个功能，得结合Vaadin的路由监听和浏览器原生事件来搞，下面给你一步步拆解清楚：

一、处理浏览器返回按钮（路由导航离开场景） #

当用户点击浏览器返回按钮时，本质是触发了Vaadin的路由导航，离开当前视图。咱们可以利用Vaadin自带的BeforeLeaveObserver接口来监听这个事件，同时结合ConfirmDialog自定义确认弹窗内容：

1. 让你的视图类实现BeforeLeaveObserver接口，重写beforeLeave方法
2. 在方法里判断是否需要拦截导航（比如用户有未保存的修改），如果需要就推迟导航并弹出确认框

@Route("your-target-view")
public class YourView extends VerticalLayout implements BeforeLeaveObserver {

    // 这个变量要根据你的业务逻辑更新，比如用户输入内容后设为true，保存后设为false
    private boolean hasUnsavedChanges = false;

    @Override
    public void beforeLeave(BeforeLeaveEvent event) {
        // 只有当存在未保存修改时才触发弹窗
        if (hasUnsavedChanges) {
            // 先推迟导航，等用户做出选择后再决定是否继续
            BeforeLeaveEvent.ContinueNavigationAction continueAction = event.postpone();
            
            // 创建自定义确认对话框
            ConfirmDialog confirmDialog = new ConfirmDialog();
            confirmDialog.setHeader("确认离开");
            confirmDialog.setText("您有未保存的更改，确定要离开当前页面吗？");
            confirmDialog.setConfirmText("离开");
            confirmDialog.setCancelText("留在当前页面");
            
            // 用户选择“离开”时，继续之前的导航操作
            confirmDialog.addConfirmListener(e -> {
                continueAction.proceed();
                confirmDialog.close();
            });
            
            // 用户选择“留在当前页面”时，直接关闭对话框，导航被终止
            confirmDialog.addCancelListener(e -> confirmDialog.close());
            
            confirmDialog.open();
        }
    }

    // 示例：更新未保存状态的方法，根据你的实际业务调整
    private void updateUnsavedState(boolean isUnsaved) {
        this.hasUnsavedChanges = isUnsaved;
        // 这里可以加一些UI反馈，比如提示用户有未保存内容
    }
}

二、处理页面卸载场景（关闭标签/刷新页面） #

如果用户直接关闭浏览器标签页或者刷新页面，Vaadin的路由事件不会触发，这时候得借助浏览器的beforeunload原生事件来处理。不过要注意：现代浏览器出于安全限制，不允许自定义这个事件的弹窗内容，只能用浏览器自带的确认提示。

咱们可以在视图的onAttach方法里添加这个事件监听，同时同步Java端的未保存状态到前端：

@Override
protected void onAttach(AttachEvent attachEvent) {
    super.onAttach(attachEvent);
    
    // 监听beforeunload事件，处理页面卸载场景
    getElement().executeJs("""
        const viewInstance = this;
        window.addEventListener('beforeunload', function(e) {
            // 判断当前是否有未保存修改
            if (viewInstance.hasUnsavedChanges) {
                // 阻止默认行为，触发浏览器确认弹窗
                e.preventDefault();
                // Chrome等浏览器需要设置returnValue才能弹出提示
                e.returnValue = '';
            }
        });
    """);
}

// 记得在更新未保存状态时，同步到前端
private void updateUnsavedState(boolean isUnsaved) {
    this.hasUnsavedChanges = isUnsaved;
    // 把Java端的状态同步到前端JS
    getElement().executeJs("this.hasUnsavedChanges = $0;", isUnsaved);
}

几个注意点 #

• hasUnsavedChanges的状态一定要准确，要和你的业务逻辑绑定，比如用户输入内容、修改表单后立刻更新状态，保存成功后重置为false
• 使用event.postpone()后，必须调用continueAction.proceed()来继续导航，不然导航会一直处于挂起状态
• beforeunload事件的弹窗内容无法自定义，这是浏览器的安全限制，所有自定义文本都会被忽略，只能用浏览器默认的提示语

备注：内容来源于stack exchange，提问作者Hakan Akkurt