Javascript 如何在“返回”上的内容之前以可视方式更改css；window.onbeforeunload”窗口；

我想问一个关于

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?";
}

---

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

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

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

---

八月一日：

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

我今天对此做了一些研究，我发现显然不可能从Javascript触发页面关闭事件，因此使用自定义HTML制作的确认框将是不可能的。我尝试创建自定义事件，将它们发送到各种窗口元素，甚至检查和复制浏览器生成的事件。（所有这些都是在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);

---

有了这个，我将所有的正文innerHTML发送到我的dataRetriever.php脚本，告诉我它是如何运行的，以及它是否如预期的那样为您工作。

感谢您的快速响应。似乎在“事件发生”之后CSS中所做的更改直到所有任务都完成后才会出现。事实上，我真正想做的是在无意卸载之前发送大量数据，同时用半透明的div元素覆盖窗口，以防止用户进行不必要的操作。问题是div元素直到离开页面之前才出现。这可能吗？提前感谢。@user921837我已经找到了如何发送信息，请检查我的更新答案。实际上我需要在离开页面之前完成数据保存（由于某些原因），所以我希望浏览器能够同步等待数据保存。无论如何，非常感谢您提供的准确信息！它必须是同步的吗？我认为，如果您只想保存一些用户信息而不希望服务器响应，那么异步应该足够了。我不认为你真的期望从服务器得到任何响应。如果你觉得我的答案很有用，请选择它作为正确答案。它必须是同步的，因为当用户在保存大量数据后返回页面时，他们必须获取所有保存的数据进行渲染。如果是异步的，有时用户无法获取他认为正确保存的数据。