當用戶單擊后退按鈕時，如何顯示 Vaadin 23 的確認對話框？

Question

當用戶單擊瀏覽器上的后退按鈕時，如何使用 Vaadin 23 顯示一個對話框以保留或離開當前頁面？

問候

Answer 1

這取決於你想要達到的目標。

請參閱這個較早的討論： Vaadin onbeforeunload 事件

通常：使用onBeforeUnload javascript 甚至為此https://www.w3schools.com/tags/ev_onbeforeunload.asp

當用戶 go 離開您的 vaadin 應用程序時執行此操作，但在您的 vaadin 應用程序中使用后退按鈕時不會執行此操作。

對於這些，您可以使用此處記錄的導航生命周期事件https://vaadin.com/docs/latest/routing/lifecycle

當用戶離開您的應用程序時，不確定它是否也會被捕獲...

Answer 2

假設你的意思是，有可能阻止導航的發生，你根本做不到。 如果禁用后退按鈕對您很重要，唯一的方法是強制您的用戶通過桌面快捷方式使用該應用程序，該快捷方式使用 --app 參數啟動應用程序（如果使用 Chrome）。 這不是 Vaadin 中的限制，而是瀏覽器行為的一般限制。

Answer 3

已經有可能在 Vaadin 上處理瀏覽器后退按鈕事件（ https://vaadin.com/docs/v14/flow/routing/tutorial-routing-lifecycle ）：

public class SignupForm extends Div implements BeforeLeaveObserver {

    @Override
    public void beforeLeave(BeforeLeaveEvent event) {

        if (this.hasChanges()) {

            ContinueNavigationAction action = event.postpone();

            ConfirmDialog.build("Are you sure you want"+
                    " to leave this page?")
                    .ifAccept(action::proceed)
                    .show();
        }
    }

    private boolean hasChanges() {
        // no-op implementation
        return true;
    }
}

這段代碼工作一次但是當你點擊確認對話框上的取消以便你想留在當前頁面並再次點擊瀏覽器上的后退按鈕時，你不會再看到任何確認對話框......我不明白，為什么...