javascript - 在 window.onbeforeunload 上确认（）

Question

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

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

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

score 14 · Accepted Answer

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

文件：

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

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

score 12 · Accepted Answer

虽然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';
});

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

score 0 · Accepted Answer

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

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

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

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

javascript - 在 window.onbeforeunload 上确认（）

3 回答 3

Related

Reference