javascript - 如何在返回 "window.onbeforeunload"上的内容之前明显更改 css

Question

我想问一个关于window.onbeforeunload的问题。

我考虑在确认是否卸载之前让一个覆盖元素出现。但是下面的代码似乎不能正常工作。 dom元素'COVERALL'在确认卸载后出现。

window.onbeforeunload = function(event){

    $( COVERALL )
        .css('zIndex', 1000000)
        .fadeTo(1000, 1.0);

    ~~~~
    ~~~~
    some time-consuming tasks here
    ~~~~
    ~~~~

    return event.returnValue = "are you sure?";
}

Answer 1

正确的做法是使用事件监听器捕获事件对象，然后阻止默认操作即离开。

window.addEventListener('beforeunload',
    function(e)
    {
        if (!confirm('Are you sure that you want to leave?'))
            e.preventDefault();
    }, 1);

它的实现可能因浏览器而异。在我的 Fiefox 6 中，它再次要求确认一次 e.preventDefault();达到指令，作为 Mozilla 实现的安全措施。

---

8 月 1 日:

今天我已经尝试过，在 Chromium 浏览器中，如果您在不要求用户确认(例如使用确认框)的情况下阻止默认操作，该页面无论如何都会关闭。

我今天对此进行了一些研究，发现显然不可能从 Javascript 触发页面关闭事件，因此使用自定义 HTML 制作的确认框将不可行。我尝试创建自定义事件，将它们分派(dispatch)到各种窗口元素，甚至检查和复制浏览器生成的事件。 (所有这些在 Firefox 和 Chromium 中我都没有检查，因为 Firefox 不支持意味着永远不要依赖这样的东西)

但对你来说是个好消息，我发现如果你快速设置一个 XMLHttpRequest 并在离开前发送你想要保存的信息，即使页面有数据发送也会在后台完成已关闭。

我已经使用以下代码成功地为两种浏览器实现了这一点。

window.addEventListener('beforeunload',
function(e)
{
    var fd = new FormData();
    fd.append('html', document.body.innerHTML);
    var xhr = new XMLHttpRequest;
    xhr.open('POST', './dataRetriever.php');
    xhr.send(fd);
    // uncomment these if you want confirmation for all browsers
    // because this code will not ask for confirmation in others
    // than Mozilla powered ones.
    //if (!confirm('Leave?'))
    //  e.preventDefault();
}
, 1);

有了那个，我将所有 body innerHTML 发送到我的 dataRetriever.php 脚本，告诉我它是如何进行的，以及它是否按预期工作。