JavaScript 问题：Onbeforeunload 还是 Onunload？

Posted 2023-02-19

【中文标题】JavaScript 问题：Onbeforeunload 还是 Onunload？

【英文标题】：JavaScript question: Onbeforeunload or Onunload?

【发布时间】：2011-04-16 02:09:54

【问题描述】：

所以我想在页面刷新或用户退出页面时将一些信息存储在浏览器的本地存储中以供将来使用。我想我会使用一些 javascript 来检测事件并存储页面访问的状态。

现在我的困境是：我应该使用 Onbeforeunload 还是 Onunload 方法来实现这个目标？

谢谢

【问题讨论】：

查看浏览器对onbeforeunload WindowEventHandler 的支持developer.mozilla.org/en-US/docs/…

查看浏览器对onunload WindowEventHandler 的支持developer.mozilla.org/en-US/docs/Web/API/…（请注意，本文档中未指定浏览器版本）

相关***.com/questions/158673/…

MSDN 说 IE9+ 支持 onbeforeunload msdn.microsoft.com/en-us/library/ff974336(v=vs.85).aspx

在 IE8 上成功测试后，注意到 Mozilla 说 onbeforeunload is supported on IE4+ 而 MSDN 说 IE9+。我想这只是因为微软不支持 IE8 及以下（因此它甚至没有在活动的 IE 版本支持表中显示 IE8 及以下），请参阅windows.microsoft.com/en-gb/windows/end-support-help

【参考方案1】：

为了安全起见，为什么不在两者都注册呢？只需让侦听器检查数据是否已存储并提前退出。

这是一个使用事件属性的简单示例：

window.onunload = window.onbeforeunload = (function()

  var didMyThingYet=false;

  return function()
    if (didMyThingYet) return;
    didMyThingYet=true;
    // do your thing here...
  

());

或者你可以使用 attachEvent:

(function()

  var didMyThingYet=false;

  function listener ()
    if (didMyThingYet) return;
    didMyThingYet=true;
    // do your thing here...
  

  window.attachEvent("onbeforeunload", listener);
  window.attachEvent("onunload", listener);    

());

【讨论】：

这听起来像是涵盖所有基础的可行想法。如果您能将我指向一个 sn-p 或一个资源，就事件侦听器和提前退出而言，那就太好了。

感谢 sn-p。我在 windows 和 mac os chrome/firefox 上进行了尝试，它似乎涵盖了所有基础。对 Opera 和 IE9 测试版进行更多测试应该会让我运行起来。

【参考方案2】：

执行此操作的正确位置是 onunload。 onbeforenload 用于当您可能需要阻止用户离开页面时使用，例如当有未保存的数据时。

我会厌倦编写涵盖所有情况的代码，因为您不愿意测试所有情况。如果您进行研究并发现跨浏览器太复杂了，是的，请继续并尽可能多地做。但是，我相信在卸载时进行本地存储是没有问题的。我实际上确实遇到了一个问题，试图将信息发送到服务器 onunload。这在浏览器中并没有可靠地发生，所以我最终找到了一种同时使用 unload 和 beforeunload 的方法，但只有在尽职调查之后。

所以我的建议是在卸载时进行，检查所有浏览器。

【讨论】：

+1 两者都试过了，如果你在其中调用indexedDB.deleteDatabase，Chrome 会引发一个带有onbeforeunload 的丑陋对话框，但它很高兴在onunload 内部进行相同的调用。跨度>

【参考方案3】：

我相信 Onbeforeunload 是一个安全的选择。浏览器可能无法完全执行 onunload 脚本 - 例如，如果您在 onunload 中有警报，则如果您关闭窗口，chrome 将不会显示。

【讨论】：

我在 Mac OS X 上测试了 Chrome v. 5 和 6，它会在 OnUnload 时发出警报。我希望有一个矩阵/图表可以列出每个浏览器的 DOM 支持。谢谢。

【参考方案4】：

根据我的经验：使用 onunload，因为 Opera 不支持其他事件。是的，我知道...Opera...但还是 :)

【讨论】：

更新：Opera 现在使用 V8 :)