检测用户是否离开网页的最佳方法是什么?
onunload JavaScript事件并不是每次都有效(HTTP请求所花费的时间比终止浏览器所需的时间长)。
创建一个可能会被当前的浏览器阻止。
检测用户是否离开网页的最佳方法是什么?
onunload JavaScript事件并不是每次都有效(HTTP请求所花费的时间比终止浏览器所需的时间长)。
创建一个可能会被当前的浏览器阻止。
当前回答
Mozilla Developer Network对onbeforeunload有一个很好的描述和示例。
如果你想在离开页面之前警告用户你的页面是脏的(即如果用户输入了一些数据):
window.addEventListener('beforeunload', function(e) {
var myPageIsDirty = ...; //you implement this logic...
if(myPageIsDirty) {
//following two lines will cause the browser to ask the user if they
//want to leave. The text of this dialog is controlled by the browser.
e.preventDefault(); //per the standard
e.returnValue = ''; //required for Chrome
}
//else: user is allowed to leave without a warning dialog
});
其他回答
你能做的就是在页面加载时打开一个WebSocket连接,可以选择通过WebSocket发送数据来标识当前用户,然后在服务器上检查连接何时关闭。
我知道这个问题已经被回答了,但如果你只想在实际浏览器关闭时触发一些东西,而不仅仅是在页面加载发生时,你可以使用以下代码:
window.onbeforeunload = function (e) {
if ((window.event.clientY < 0)) {
//window.localStorage.clear();
//alert("Y coords: " + window.event.clientY)
}
};
在我的例子中,我正在清除本地存储并用鼠标y坐标提醒用户,只有当浏览器关闭时,这将在程序内的所有页面加载中被忽略。
页面可见性API
✅页面可见性API提供了可以观察的事件,以了解文档何时变得可见或隐藏。
✅当用户最小化窗口或切换到另一个选项卡时,API触发可见性变化事件。
✅我们可以根据visibilityState执行操作
function onVisibilityChange() {
if (document.visibilityState === 'visible') {
console.log("user is focused on the page")
} else {
console.log("user left the page")
}
}
document.addEventListener('visibilitychange', onVisibilityChange);
Mozilla Developer Network对onbeforeunload有一个很好的描述和示例。
如果你想在离开页面之前警告用户你的页面是脏的(即如果用户输入了一些数据):
window.addEventListener('beforeunload', function(e) {
var myPageIsDirty = ...; //you implement this logic...
if(myPageIsDirty) {
//following two lines will cause the browser to ask the user if they
//want to leave. The text of this dialog is controlled by the browser.
e.preventDefault(); //per the standard
e.returnValue = ''; //required for Chrome
}
//else: user is allowed to leave without a warning dialog
});
在需要执行一些异步代码的情况下(比如向服务器发送消息,说明用户现在没有关注您的页面),beforeunload事件将不会给异步代码运行时间。在异步的情况下,我发现能见度变化和mouseleave事件是最好的选择。当用户更改选项卡、隐藏浏览器或将courser移出窗口作用域时,这些事件将触发。
文档。addEventListener (mouseleave, e = > { //执行一些异步代码 }) 文档。addEventListener (visibilitychange, e = > { 如果文档。visbilitystate === 'visible') { //报告用户处于焦点中 }其他{ //报告用户不聚焦 } })