onbeforeunload 和 onunload 的区别

Question

onbeforeunload 和 onunload 有什么区别？ 我还有一个与它在 iPad 上的使用相关的特定问题...我有一个页面 (myPage.html)，我试图在页面关闭时显示警报（即按下 X 以关闭 iPad 上的选项卡）

现在我尝试同时使用 window.onunload 和 window.onbeforeunload 以下是我在 iPad 上的发现；

1. 使用 window.onunload ，当用户导航到与 myPage.html 不同的页面时（通过单击某个链接或在 myPage.html 上进行 Google 搜索），我能够收到警报。但是，当从最小化视图 (X) 关闭选项卡时没有任何反应

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

我想知道是否有其他方法可以解决此问题？

谢谢。

Answer 1

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

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

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

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

Answer 2

添加 AlienWebguy 的 ans，以避免在支持这两个事件的浏览器上进行双重调用，

var onBeforeUnLoadEvent = false;

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

Answer 3

onbeforeunload:

• 在卸载开始前调用
• MDN tells me 您可以使用event.preventDefault(); 取消关闭页面
• 或者通过返回一个非空值（即一个值！= 0），页面会弹出一个确认对话框，允许用户选择取消关闭
• MDN 还说 Opera 12 及更高版本支持 onbeforeunload - 看起来它现在支持它一段时间了

onunload:

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

我能想到您为什么要使用onunload 而不是onbeforeunload 的唯一原因是您的onunload 代码可能会花费大量时间，并且不希望用户看到挂起的窗口关闭时。

Answer 4

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