瀏覽器后退按鈕單擊或頁面刷新時發出警報

Question

我見過相同的功能是多個站點，包括 SO。 我也在努力實現這一目標。 這是到目前為止的代碼。

 <script>
            var myEvent = window.attachEvent || window.addEventListener;
            var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; 

            myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
                var confirmationMessage = ' ';  
                (e || window.event).returnValue = confirmationMessage;
                return confirmationMessage;
            });
        </script>

問題是上面的代碼在 chrome 和 IE 中運行良好，但是當我嘗試在 Firefox 上測試時它不起作用。 我檢查了螢火蟲，但沒有錯誤。 我更新了 Firefox，版本是 47.0.1。

但是問題沒有解決。

任何意見將是有益的。

伙計們，如果您有比這更好的代碼，那么這也會有所幫助。

Answer 1

使用下面的代碼，我在 Firefox 中對其進行了測試並且工作正常：

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

Answer 2

好吧，我測試了這段代碼，即使關閉了 firebug 控制台，它也可以在 firefox 和 chrome 上運行：

     <script>
            window.onbeforeunload = function (e) {
                var message = "Are you sure ?";
                var firefox = /Firefox[\/\s](\d+)/.test(navigator.userAgent);
                if (firefox) {
                    //Add custom dialog
                    //Firefox does not accept window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() furthermore
                    var dialog = document.createElement("div");
                    document.body.appendChild(dialog);
                    dialog.id = "dialog";
                    dialog.style.visibility = "hidden";
                    dialog.innerHTML = message;
                    var left = document.body.clientWidth / 2 - dialog.clientWidth / 2;
                    dialog.style.left = left + "px";
                    dialog.style.visibility = "visible";
                    var shadow = document.createElement("div");
                    document.body.appendChild(shadow);
                    shadow.id = "shadow";
                    //tip with setTimeout
                    setTimeout(function () {
                        document.body.removeChild(document.getElementById("dialog"));
                        document.body.removeChild(document.getElementById("shadow"));
                    }, 0);
                }
                return message;
            };
        </script>

我發現這個腳本crossbrowser-onbeforeunload.js 。 它是跨瀏覽器兼容的。

Answer 3

window.onbeforeunload是一個很好的方法。 但它似乎僅在用戶與網站交互（單擊或滾動）時才在 Firefox 中工作。 否則函數不會觸發。 另一方面，Chrome 效果很好。

注意：為了防止不需要的彈出窗口，一些瀏覽器不會顯示在 beforeunload 事件處理程序中創建的提示，除非頁面已經與之交互； 有些根本不顯示它們

文檔

Answer 4

這段代碼對我有用。

window.onbeforeunload = function () {
    return 'Are you sure? Your work will be lost. ';
};