151

如何防止网页使用 JavaScript 离开？

4

10 回答 10

190

使用onunload允许您显示消息，但不会中断导航（因为为时已晚）。但是，使用onbeforeunload会中断导航：

window.onbeforeunload = function() {
  return "";
}

注意：返回一个空字符串是因为较新的浏览器提供了一条无法覆盖的消息，例如“任何未保存的更改都将丢失”。

在较旧的浏览器中，您可以指定要在提示中显示的消息：

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}
于 2009-05-04T18:06:41.147 回答
26

与这里介绍的其他方法不同，这段代码不会导致浏览器显示警告，询问用户是否想离开；相反，它利用 DOM 的事件特性在浏览器有机会从内存中卸载它之前重定向回当前页面（从而取消导航）。

由于它是通过直接短路导航来工作的，所以不能用来防止页面被关闭；但是，它可以用来禁用帧破坏。

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

免责声明：你不应该这样做。如果页面上有破坏框架的代码，请尊重作者的意愿。

于 2013-08-08T00:19:00.600 回答
19

使用现代 addEventListener API 以更现代和浏览器兼容的方式等效。

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

来源：https ://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

于 2015-10-20T15:14:32.447 回答
15

我最终得到了这个略有不同的版本：

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

在其他地方，当表单变脏时，我将脏标志设置为 true（或者我想阻止导航离开）。这使我可以轻松控制用户是否获得确认导航提示。

使用所选答案中的文本，您会看到多余的提示：

在此处输入图像描述

于 2014-03-19T04:03:23.603 回答
7

在 Ayman 的示例中，通过返回 false 可以防止浏览器窗口/选项卡关闭。

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}
于 2009-05-04T17:27:41.770 回答
6

相当于 jQuery 1.11 中接受的答案：

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

JSFiddle 示例

altCognito 的回答使用了该unload事件，该事件发生得太晚，JavaScript 无法中止导航。

于 2015-07-14T12:25:21.753 回答
3

使用onunload。

对于 jQuery，我认为它是这样工作的：

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});
于 2009-05-04T17:21:46.150 回答
3

该建议的错误消息可能与浏览器已经显示的错误消息重复。在chrome中，2条类似的错误信息在同一个窗口中依次显示。

在 chrome 中，自定义消息后显示的文本是：“您确定要离开此页面吗？”。在 Firefox 中，它根本不显示我们的自定义错误消息（但仍显示对话框）。

更合适的错误消息可能是：

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

或者stackoverflow风格：“你已经开始写或编辑一篇文章了。”

于 2012-10-11T17:55:29.173 回答
3

如果您正在捕捉浏览器的后退/前进按钮并且不想离开，您可以使用：

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

否则，您可以使用beforeunload事件，但消息可能会或可能不会跨浏览器工作，并且需要返回强制内置提示的内容。

于 2018-04-24T18:29:22.260 回答
0

如果您需要在退出时将状态切换回无通知，请使用以下行：

window.onbeforeunload = null;
于 2021-09-01T13:38:09.173 回答