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

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

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

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

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

与这里介绍的其他方法不同，这段代码不会导致浏览器显示警告，询问用户是否要离开；相反，它利用 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);
})();

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

使用现代 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

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

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

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

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

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

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}