在浏览器点击返回按钮或刷新页面时发出警报

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>

在谷歌和IE浏览器中，上述代码运行正常，但是当我尝试在火狐浏览器中测试时却不起作用。我检查了firebug，但没有错误。我已经更新了firefox，版本号是47.0.1。

但问题仍未解决。

如果您有比这更好的代码，那么也会很有帮助。

- Roxx

---

使用 onbeforeunload()。 - JYoThI

Answer 1

使用以下代码，我在Firefox中进行了测试，运行良好：

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

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

- shivgre

---

请移除所有其他代码，将此代码添加到脚本标签中，它就可以工作了。 - shivgre

如果我打开Firebug，它就开始工作了。我不知道为什么它不工作？但是当我打开Firebug时，它就开始工作了。 - Roxx

Answer 2

我测试了这段代码，在火狐浏览器和谷歌浏览器上运行良好，即使关闭了Firebug控制台：

     <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。它是跨浏览器兼容的。

- shivgre

---

如何更改正文文本和按钮文本？ - Shankar S Bavan

Answer 3

window.onbeforeunload 是一种不错的方法。但是似乎只有在用户与网站进行交互（点击或滚动）时，它才能在 Firefox 中工作。否则该函数不会触发。而另一方面，Chrome 则表现得非常好。

注意：为了防止不受欢迎的弹出窗口，一些浏览器不会显示在 beforeunload 事件处理程序中创建的提示，除非页面已经被交互过；一些浏览器根本不会显示它们。

文档

- Pamz

Answer 4

这个代码对我有效。

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

- MD Ashik

Answer 5

试试这个

window.addEventListener('beforeunload', function (event) {
  event.preventDefault();

  event.returnValue = 'Are you sure you want to leave this page?';
});

- Mher