Javascript 在 window.onbeforeunload 上确认（）

confirm() on window.onbeforeunload

提问by DMIL

I want to show a confirmation dialog if the user wants to leave the page with unsaved form data. What I have is:

如果用户想要离开带有未保存表单数据的页面，我想显示一个确认对话框。我所拥有的是：

window.onbeforeunload = function() {
    if (not_saved) if (confirm('Changes will not be saved')) return true;
    return false;
}

But no matter what the user clicks, the result is the same - the stupid hardcoded dialog box that asks them whether they want to leave the page or stay on page. What I want to ask them is whether they want to stay or leave, and if they want to stay nothing happens, if they want to leave, they leave. Is this even possible? I can see how browsers want to limit what websites can do about keeping the users on the page, but I think I've seen some websites (Google Docs I think) having nice civilized dialog boxes.

但是无论用户点击什么，结果都是一样的——愚蠢的硬编码对话框，询问他们是要离开页面还是留在页面上。我想问的是他们是想留下还是离开，如果他们想留下什么都不会发生，如果他们想离开，他们就离开。这甚至可能吗？我可以看到浏览器希望如何限制网站可以做些什么来让用户留在页面上，但我想我已经看到一些网站（我认为是 Google 文档）具有很好的文明对话框。

回答by Nathaniel

Although window.onbeforeunloadworks, it's considered bad practice. It's better to use something like the following:

虽然window.onbeforeunload有效，但它被认为是不好的做法。最好使用以下内容：

if (typeof window.addEventListener === 'undefined') {
    window.addEventListener = function(e, callback) {
        return window.attachEvent('on' + e, callback);
    }
}

window.addEventListener('beforeunload', function() {
    return 'Dialog Text Here';
});

First we check if window.addEventListenerexists, which it does not in IE, else we polyfill it, and then we attach the event.

首先我们检查是否window.addEventListener存在，它在 IE 中不存在，否则我们对它进行 polyfill，然后我们附加事件。

回答by Peter

window.onbeforeunload = function(e) {
    return 'Dialog text here.';
};

Docs:

文档：

• https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload
• http://dev.w3.org/html5/spec-LC/history.html#unloading-documents

• https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload
• http://dev.w3.org/html5/spec-LC/history.html#unloading-documents

Note that in Firefox 4 and later the returned string is not displayed to the user.

If the returnValue attribute of the event object is not the empty string, or if the event was canceled, then the user agent should ask the user to confirm that they wish to unload the document. The prompt shown by the user agent may include the string of the returnValue attribute, or some leading subset thereof. (A user agent may want to truncate the string to 1024 characters for display, for instance.)

请注意，在 Firefox 4 及更高版本中，返回的字符串不会显示给用户。

如果事件对象的 returnValue 属性不是空字符串，或者事件被取消，那么用户代理应该要求用户确认他们希望卸载文档。用户代理显示的提示可能包括 returnValue 属性的字符串，或其某个前导子集。（例如，用户代理可能希望将字符串截断为 1024 个字符以进行显示。）

回答by Nicoleta Andreea Soare

With jQuery, you can set the same handlers. The code may defer based on your version.

使用 jQuery，您可以设置相同的处理程序。代码可能会根据您的版本延迟。

    function AnyFunction(e){ /**** your code *****/ };

    $(function () {
      $(window).bind('unload', function (e) { return AnyFunction(e); });
      $(window).bind('beforeunload', function (e) { return AnyFunction(e); });
    });

You can also change the confirm or alert functionusing plugins as bootbox.

您还可以使用插件作为bootbox更改确认或警报功能。