onbeforeunload和onunload之间的区别

Question

什么是onbeforeunload和onunload之间的区别？ 同时，我有一个与在iPad上使用它有关的具体问题......我有一个页面（myPage.html），在该页面中，当该页面关闭时（即在iPad上按下X关闭选项卡时），我正在尝试显示警报。

我已经尝试使用window.onunload和window.onbeforeunload。 以下是我在iPad上的发现;

1. 使用window.onunload，当用户从myPage.html导航到不同的页面时（通过单击某些链接或在myPage.html上进行Google搜索），我可以收到警报。但是，当选项卡从最小化视图（X）关闭时，什么也不会发生。

2. 使用window.onbeforeunload，即使用户从myPage.html导航到不同的页面或从最小化视图关闭选项卡（X），我也不会收到警报。

我想知道是否有任何替代方法来解决此问题？

谢谢。

- copenndthagen

Answer 1

onunload 负责在页面关闭时执行一条指令。但它会导致IE和AJAX出现问题。

onbeforeunload 更加高效，因为它不会与实际窗口关闭竞争，并在 onunload 之前触发。

我知道Opera曾经不承认 onbeforeunload - 不确定他们是否已解决此问题，但我总是注册两个监听器以确保安全：

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

- AlienWebguy

---

非常感谢那个……不过有关iPad的实施，有任何想法吗？ - copenndthagen

window.onunload = window.onbeforeunload = (function(){...如果浏览器对这两个事件都没有问题，将会执行两次该函数。 - Jeyan

@noboundaries-如何修复这个问题，它为什么会触发两次？ - Shahidul Haque

@ShahidulHaque 你需要编写代码来检测第二次触发并忽略它。 - Armen Michaeli

Answer 2

参考 AlienWebguy 的答案，为了避免在同时支持这两个事件的浏览器中发生双重调用，可以进行如下修改：

var onBeforeUnLoadEvent = false;

window.onunload = window.onbeforeunload= function(){
if(!onBeforeUnLoadEvent){
  onBeforeUnLoadEvent = true;
  //your code here
  }
};

- Jeyan

Answer 3

onbeforeunload:

• 在卸载开始之前调用
• MDN 告诉我你可以使用event.preventDefault();来取消页面的关闭
• 或者返回一个非空值（即一个值 != 0），页面将弹出确认对话框，允许用户选择取消关闭
• MDN 还说 Opera 12 及以上版本支持 onbeforeunload - 看起来它已经支持了一段时间

onunload:

• 在卸载开始后被调用，但在任何资源释放之前（我不清楚在此期间到底做了什么）
• 此时取消页面关闭为时已晚

我唯一能想到需要使用 onunload 而不是 onbeforeunload 的原因是你的 onunload 代码可能会花费相当长的时间，并且不希望用户看到在关闭时挂起的窗口。

- B T

---

如果页面将在某些iPhone上查看，则会发现onbeforeunload不会被处理。 - Oliver Williams

Answer 4

除了可取消性之外，onbeforeunload 和 onunload 之间的一个重要区别是前者会因下载链接而触发而后者不会。例如：<a href="https://somewhere.com/thething.zip">download</a> 将会触发 onbeforeunload 处理程序，但不会触发 onunload。

- dvdplm

---

我无法在Chrome上重现这个问题。你有关于这个问题的任何文档资料吗？ - Bram Vanroy