在Chrome中點擊“取消加載網站？”上的“取消”以刷新頁面

Question

我有這個簡單的代碼，可以在用戶離開或刷新頁面時顯示

<script>
        var buttonClicked = false;

        window.onbeforeunload = function () {
            if (buttonClicked) {
                buttonClicked = false;
            }
            else {
                return "WARNING";
            }
        };
</script>

如果用戶單擊“ 下一步”並且不顯示警告，則buttonClicked為true。

當您單擊重新加載時，此警告仍會按預期顯示，但是單擊“ 取消”仍會刷新頁面，丟失在表單中輸入的所有數據。 這僅在Google Chrome 77中發生。我在Firefox和Edge上嘗試過，但沒有發生。

奇怪的是，當打開DevTools時，Chrome不會刷新頁面。

這是否是我的一端出現錯誤的錯誤？

Answer 1

根據MDN文檔 ：

根據規范，要顯示確認對話框，事件處理程序應在事件上調用preventDefault() 。

但是請注意，並非所有瀏覽器都支持此方法，有些瀏覽器則要求事件處理程序實現以下兩種舊方法之一：

• 將字符串分配給事件的returnValue屬性
• 從事件處理程序返回一個字符串。

似乎官方規范希望您調用Event#preventDefault 。 但是，某些較舊的瀏覽器可能不遵守此要求，並要求事件處理程序返回字符串或設置事件的returnValue屬性。

  const $preventReload = document.getElementById('prevent_reload'); window.onbeforeunload = (ev) => { if ($preventReload.checked) { ev.preventDefault(); ev.returnValue = 'prevented'; return 'prevented'; } } 

 <lable for="prevent_reload">Prevent reload</lable> <input id="prevent_reload" type="checkbox" /> <button onclick="location.reload()">Reload page!</button> 

因此，最新版本的chrome（chrome 77）可能會刪除對后兩個選項的支持，並選擇僅支持官方規格。

Answer 2

嘗試使用如下所示的內容：

 <script> var buttonClicked = false; window.onbeforeunload = function () { if (buttonClicked) { buttonClicked = false; } else { var answer = confirm("WARNING"); if (answer) { //code for when user leaves alert("bye"); } else { window.location = "http://www.example.com"; } } }; </script> 

這應該詢問用戶退出時是否要離開頁面。

來源： 離開頁面之前的JavaScript