window.onbeforeunload 侦听器未在 Firefox 中的选项卡关闭时触发答案

【问题标题】：window.onbeforeunload listener not triggering on tab close in Firefoxwindow.onbeforeunload 侦听器未在 Firefox 中的选项卡关闭时触发
【发布时间】：2015-08-03 20:07:17
【问题描述】：

问题

我有一个应该在 window.onbeforeunload 上运行的函数。在 Chrome 中，这可以正常工作，并在标签或窗口关闭或刷新时运行。然而，在 Firefox 中，它只在刷新时运行，而不是关闭。

守则

这是一个例子：

var onStorageUpdate = function(){
    var lastUnloaded = localStorage.getItem("LastUnloaded");
    if(lastUnloaded === null){
        $("div").text("Never stored");
    }
    else{
        $("div").text(lastUnloaded);
    }
};

onStorageUpdate();

window.addEventListener("beforeunload", function(){
    var now = Date.now();
    localStorage.setItem("LastUnloaded", now);
});

window.addEventListener("storage", function(){
    onStorageUpdate();
});

这是在上述代码中应该工作的事件顺序：

在初始页面加载时，尝试从 localStorage 获取 LastUnloaded。如果没有检索到，则显示“从不存储”，否则显示已存储的值（应为长整数时间戳）
卸载选项卡后，使用当前时间戳更新LastUnloaded。 这是关闭窗口时在 Firefox 中似乎不起作用的部分。
在 localStorage 发生变化时，更新 DOM 以显示时间戳

演示

这是示例的代码笔：http://codepen.io/jakelauer/full/NqRyqQ/

为了对其进行测试，请在两个不同的窗口或选项卡中打开链接。您应该注意到，当您刷新任一选项卡时，两个选项卡都会更新以显示相同的时间戳。在 Chrome 中，您会注意到，如果您关闭一个选项卡，另一个选项卡将更新其时间戳。在 Firefox 中，您会注意到时间戳不会更新。

有什么想法吗？提前致谢！

【问题讨论】：

不确定为什么有人提出“关闭”请求？这个问题显然是关于编程的。
根据Mozilla's Documentationbeforeunload事件的意图是提供一种方式来提示用户并允许他们取消页面卸载。他们的文档还表明该事件标准的浏览器实现存在很大差异。因此，对于初学者，您可能应该为此使用unload 事件。我还听说过一个不应该依赖 unload 事件运行的轶事，因为跨浏览器的行为不一致。
@maurice 并且你可以用它来保存页面状态，你不需要用它来提示用户。
@epascarello 是的，但问题是页面状态的保存是在unload 可能取消之前还是之后进行。如果您要保存像 lastAttemptedUnload 这样的密钥，它可能属于 beforeunload 处理程序。被称为LastUnloaded，我认为其目的是捕获页面被卸载的实际事件。
@Jake 如果您刷新未关闭的页面，存储密钥是否已在 Firefox 中更新？如果是这样，手动更改另一个选项卡中的存储密钥是否会导致存储更新？也许 Firefox 不支持跨标签的事件。

标签： javascript html google-chrome firefox local-storage

【解决方案1】：

我最终只使用了 onunload，它在任何地方都可以正常工作。

【讨论】：