有没有办法在用户关闭浏览器窗口或刷新页面时运行最终的 JavaScript 代码?
我正在考虑类似于 onload 但更像 onclose 的东西?谢谢。
我不喜欢 onbeforeunload 方法,它总是会弹出一个确认框(离开页面/留在 mozilla)或(重新加载/不在 chrome 上重新加载)。有没有办法安静地执行代码?
有
window.onbeforeunload
和window.onunload
两种,根据浏览器的不同,使用方式也不同。您可以通过将窗口属性设置为函数或使用 .addEventListener
: 来分配它们
window.onbeforeunload = function(){
// Do something
}
// OR
window.addEventListener("beforeunload", function(e){
// Do something
});
通常,如果您需要阻止用户离开页面(例如,用户正在处理一些未保存的数据,因此他/她应该在离开之前保存),则使用
onbeforeunload
。据我所知,onunload
不支持 Opera,但您始终可以同时设置两者。
好的,我找到了一个可行的解决方案,它包括使用
beforeunload
事件,然后使处理程序返回 null
。这将执行所需的代码,而不会弹出确认框。事情是这样的:
window.onbeforeunload = closingCode;
function closingCode(){
// do something...
return null;
}
有时您可能想让服务器知道用户正在离开页面。例如,这对于清理临时存储在服务器上的未保存图像、将该用户标记为“离线”或在完成会话时进行记录非常有用。
过去,您会在
beforeunload
函数中发送 AJAX 请求,但这有两个问题。如果您发送异步请求,则无法保证该请求会正确执行。如果发送同步请求,它会更可靠,但浏览器会挂起,直到请求完成。如果这是一个缓慢的请求,这会给用户带来巨大的不便。
navigator.sendBeacon()
。通过使用 sendBeacon()
方法,当用户代理有机会时,数据会异步传输到 Web 服务器,而不会延迟卸载或影响下一次导航的性能。这解决了提交分析数据的所有问题:数据发送可靠,异步发送,并且不影响下一页的加载。
除非您仅针对桌面用户,否则
sendBeacon()
不应与 unload
或 beforeunload
一起使用,因为它们无法在移动设备上可靠地触发。相反,您可以收听 visibilitychange
事件。每当您的页面可见并且用户切换选项卡、切换应用程序、转到主屏幕、接听电话、离开页面、关闭选项卡、刷新等时,都会触发此事件。
以下是其用法示例:
document.addEventListener('visibilitychange', function() {
if (document.visibilityState == 'hidden') {
navigator.sendBeacon("/log.php", analyticsData);
}
});
当用户返回页面时,
document.visibilityState
将更改为'visible'
,因此您也可以处理该事件。
sendBeacon()
支持:
目前不支持:
这里有一个 sendBeacon() 的polyfill,以防您需要添加对不支持的浏览器的支持。如果该方法在浏览器中不可用,它将发送同步 AJAX 请求。
更新:
可能值得一提的是,
sendBeacon()
仅发送POST
请求。如果您需要使用任何其他方法发送请求,另一种方法是使用 fetch API
,并将 keepalive
标志设置为 true
,这会导致其行为与 sendBeacon()
相同。 浏览器对 fetch API 的支持大致相同。
fetch(url, {
method: ...,
body: ...,
headers: ...,
credentials: 'include',
mode: 'no-cors',
keepalive: true,
})
jQuery 版本:
$(window).unload(function(){
// Do Something
});
更新:jQuery 3:
$(window).on("unload", function(e) {
// Do Something
});
谢谢加勒特
此处的文档鼓励监听 onbeforeunload 事件和/或在窗口上添加事件侦听器。
window.addEventListener('beforeunload', function(event) {
//do something here
}, false);
您还可以使用函数或函数引用填充窗口的 .onunload 或 .onbeforeunload 属性。
虽然跨浏览器的行为没有标准化,但该函数可能会返回浏览器在确认是否离开页面时显示的值。
您可以使用
window.onbeforeunload
。
window.onbeforeunload = confirmExit;
function confirmExit(){
alert("confirm exit is being called");
return false;
}
该事件称为
beforeunload
,因此您可以为 window.onbeforeunload
分配一个函数。
有没有办法安静地执行代码? (无弹出窗口)
我已经成功地使用了这个,而其他方法(例如返回 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 文档
更新:这似乎不适用于 IOS Safari :( 所以不是一个完整的解决方案,但也许它仍然对某人有帮助。