147

当用户关闭浏览器窗口或刷新页面时，有没有办法运行最终的 JavaScript 代码？

我正在考虑类似于 onload 但更像 onclose 的东西？谢谢。

我不喜欢 onbeforeunload 方法，它总是会弹出一个确认框（离开页面/留在 mozilla 上）或（重新加载/不要在 chrome 上重新加载）。有没有办法安静地执行代码？

4

8 回答 8

112

两者都有window.onbeforeunload和window.onunload，根据浏览器的不同，它们的使用方式也不同。您可以通过将窗口属性设置为函数或使用以下方法来分配它们.addEventListener：

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

通常，onbeforeunload如果您需要阻止用户离开页面（例如，用户正在处理一些未保存的数据，因此他/她应该在离开前保存）。据我所知，Operaonunload不支持，但您始终可以同时设置两者。

于 2012-11-18T19:10:54.023 回答
68

好的，我找到了一个可行的解决方案，它包括使用beforeunload事件然后让处理程序返回null。这将执行所需的代码，而不会弹出确认框。它是这样的：

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}
于 2012-11-18T23:45:30.247 回答
46

有时您可能想让服务器知道用户正在离开页面。这很有用，例如，清理临时存储在服务器上的未保存图像，将该用户标记为“离线”，或者在他们完成会话时进行记录。

从历史上看，您会在函数中发送 AJAX 请求beforeunload，但这有两个问题。如果您发送异步请求，则无法保证该请求会正确执行。如果您发送同步请求，它更可靠，但浏览器会挂起，直到请求完成。如果这是一个缓慢的请求，这将给用户带来巨大的不便。

后来来了navigator.sendBeacon()。通过使用该sendBeacon()方法，当User Agent有机会时，数据异步传输到Web服务器，不会延迟卸载或影响下次导航的性能。这解决了提交分析数据的所有问题：数据发送可靠，异步发送，并且不影响下一页的加载。

除非您仅针对桌面用户，sendBeacon() 否则不应与这些用户一起使用，unload或者beforeunload因为它们不能在移动设备上可靠地触发。相反，您可以收听该visibilitychange事件。每次您的页面可见并且用户切换选项卡、切换应用程序、转到主屏幕、接听电话、离开页面、关闭选项卡、刷新等时，都会触发此事件。

以下是它的用法示例：

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState == 'hidden') { 
        navigator.sendBeacon("/log.php", analyticsData);
    }
});

当用户返回页面时，document.visibilityState将变为'visible'，因此您也可以处理该事件。

sendBeacon()支持：_

  • 边缘 14
  • 火狐 31
  • 铬 39
  • 野生动物园 11.1
  • 歌剧 26
  • iOS Safari 11.4

目前不支持：

  • IE浏览器
  • 歌剧迷你

这是sendBeacon() 的 polyfill，以防您需要添加对不受支持的浏览器的支持。如果该方法在浏览器中不可用，它将改为发送同步 AJAX 请求。

更新：

值得一提的是sendBeacon()只发送POST请求。如果您需要使用任何其他方法发送请求，另一种方法是使用fetch API标志keepalive设置为 的true，这使其行为方式与sendBeacon(). 浏览器对 fetch API的支持大致相同。

fetch(url, {
   method: ..., 
   body: ...,            
   headers: ...,       
   credentials: 'include',
   mode: 'no-cors',
   keepalive: true,
})
于 2018-09-19T18:52:42.563 回答
16

jQuery版本：

$(window).unload(function(){
    // Do Something
});

更新：jQuery 3：

$(window).on("unload", function(e) {
    // Do Something
});

谢谢加勒特

于 2016-05-12T12:41:10.700 回答
10

此处的文档鼓励监听 onbeforeunload 事件和/或在窗口上添加事件监听器。

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

您也可以使用函数或函数引用填充窗口的 .onunload 或 .onbeforeunload 属性。

尽管跨浏览器的行为没有标准化，但该函数可能会返回一个值，浏览器在确认是否离开页面时将显示该值。

于 2016-05-14T01:36:02.463 回答
9

您可以使用window.onbeforeunload.

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}
于 2012-11-18T19:08:49.853 回答
5

该事件被调用beforeunload，因此您可以为 分配一个函数window.onbeforeunload。

于 2012-11-18T19:07:13.617 回答
1

有没有办法安静地执行代码？（没有弹出）

我已经成功地使用了这个，其他方法（例如返回 null 或 false）有问题。在 ie、Edge、Chrome、Opera 上测试。

window.addEventListener('beforeunload', function (e) {
  // the absence of a returnValue property on the event will guarantee the browser unload happens
  delete e['returnValue'];
  // my code that silently runs goes here
});

上面的代码是直接从Mozilla.org 的 onbeforeunload doc粘贴的

更新：这似乎不适用于 IOS Safari :( 所以不是一个完整的解决方案，但也许它仍然可以帮助某人。

于 2021-03-20T22:37:18.547 回答