JavaScript问题：Onbeforeunload还是Onunload？

Question

JavaScript问题：Onbeforeunload还是Onunload？

20

当页面刷新或用户退出页面时，我希望能够将一些信息存储在浏览器的本地存储中，以备将来使用。我想通过使用一些JavaScript来检测事件并存储页面访问状态。

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

- pratyk

请查看 https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload#浏览器兼容性，了解 onbeforeunload WindowEventHandler 的浏览器支持情况。 - Adriano

请查看 https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onunload#Browser_compatibility 上的 onunload WindowEventHandler 的浏览器支持情况（请注意，该文档中未指定浏览器版本）。 - Adriano

相关内容：https://dev59.com/5nVC5IYBdhLWcg3w4VNy - Adriano

MSDNè،¨ç¤؛onbeforeunloadهœ¨IE9+ن¸ٹهڈ—و”¯وŒپم€‚http://msdn.microsoft.com/en-us/library/ff974336(v=vs.85).aspx - Adriano

在成功测试IE8后，注意到Mozilla表示onbeforeunload支持IE4+，而MSDN表示支持IE9+。我想这只是因为微软不支持IE8及以下版本（因此甚至不会在事件的IE版本支持表中显示IE8及以下版本），请参见http://windows.microsoft.com/en-gb/windows/end-support-help。 - Adriano

4个回答

8

正确的做法是在onunload上处理。onbeforenload用于在可能需要阻止用户离开页面时使用，例如存在未保存的数据。

我建议不要为了覆盖所有情况而编写代码，因为您不愿意测试所有情况。如果您进行研究并发现跨浏览器太复杂，那么请尽可能多地完成。然而，我认为在onunload上使用本地存储没有问题。实际上，我遇到了一个问题，试图在onunload时向服务器发送信息。这在不同浏览器上并不可靠，因此我最终采用了同时使用unload和beforeunload的方法，但是只有在充分调查后才这样做。

因此，我的建议是在onunload上处理，并检查所有浏览器的兼容性。

- Ruan Mendes

+1 我已经尝试了在两个浏览器上进行操作。如果你在Chrome中调用indexedDB.deleteDatabase函数，它会弹出一个丑陋的对话框，但是在onunload事件中执行同样的调用则可以顺利执行。 - Carl Smith

0

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

- VinayC

3

我在Mac OS X上测试了Chrome v.5和v.6，并且它确实会在OnUnload时发出警报。我希望有一个矩阵/表格，列出每个浏览器的DOM支持情况。谢谢。 - pratyk

0

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

- Milan Aleksić

更新：Opera现在使用V8 :) - Carl Smith

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dagg Nabbit · Accepted Answer

为了更加安全，为什么不同时注册两个呢？只需让监听器检查数据是否已存储并尽早退出即可。

以下是使用事件属性的简单示例：

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);    

}());