在窗口关闭或页面刷新时运行 JavaScript 代码？

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

我在想一些类似于 onload 的东西，但是更像 onclose? 谢谢。

我不喜欢 onbefore 卸载方法，它总是弹出一个确认框(离开 page/留在 mozilla)或(重新加载/不重新加载 chrome)。有办法悄悄地执行代码吗？

296645 次浏览
小开

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

小开

你可以使用 window.onbeforeunload。

window.onbeforeunload = confirmExit;
function confirmExit(){
alert("confirm exit is being called");
return false;
}
小开

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

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

通常，如果需要阻止用户离开页面，则使用 onbeforeunload(例如。使用者正在处理一些未储存的资料，所以在离开前应先储存资料)。据我所知，onunload不支持 歌剧，但是你可以两者都设置。

小开
最佳答案

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

window.onbeforeunload = closingCode;
function closingCode(){
// do something...
return null;
}
小开

JQuery 版本:

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

更新 : jQuery 3:

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

谢谢，加勒特

小开

这里的文档鼓励侦听 onbefore 卸载事件和/或在窗口上添加事件侦听器。

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

您还可以使用函数或函数引用填充 window 的. onunload 或. onbefore 卸载属性。

虽然浏览器之间的行为还没有标准化，但是这个函数可能会返回一个值，浏览器在确认是否离开页面时会显示这个值。

小开

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

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

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

除非你只是针对桌面用户，否则 sendBeacon() 不应与 ABC1或 beforeunload一起使用不能在移动设备上可靠地发射。相反，您可以监听 visibilitychange事件。每当你的页面可见，用户切换标签页、切换应用程序、进入主屏幕、接听电话、远离页面导航、关闭标签页、刷新等时，这个事件都会触发。

下面是它的用法的一个例子:

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

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

sendBeacon()是 支持:

  • 边缘14
  • Firefox 31
  • Chrome 39
  • Safari 11.1
  • 歌剧26
  • IOS Safari 11.4

目前不支持:

  • Internet Explorer
  • 迷你歌剧

如果您需要添加对不受支持的浏览器的支持，这里有一个 发送信标用聚合填料()。如果该方法在浏览器中不可用，它将发送一个同步的 AJAX 请求。

更新:

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

fetch(url, {
method: ...,
body: ...,
headers: ...,
credentials: 'include',
mode: 'no-cors',
keepalive: true,
})
小开

有没有办法悄悄地执行代码? (没有弹出窗口)

我已经成功地使用了这个方法，其他方法(如返回 null 或 false)有问题。在 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 在卸载之前粘贴的

更新: 这在 IOS Safari 上似乎不起作用: (所以不是一个完整的解决方案，但也许它仍然对某人有帮助。


提交答案