检测用户是否离开网页的最佳方法是什么?
onunload JavaScript事件并不是每次都有效(HTTP请求所花费的时间比终止浏览器所需的时间长)。
创建一个可能会被当前的浏览器阻止。
检测用户是否离开网页的最佳方法是什么?
onunload JavaScript事件并不是每次都有效(HTTP请求所花费的时间比终止浏览器所需的时间长)。
创建一个可能会被当前的浏览器阻止。
当前回答
一种(略显笨拙的)方法是用AJAX调用服务器端来替换和链接,指示用户离开,然后使用相同的javascript块将用户带到他们所请求的外部站点。
当然,如果用户只是关闭浏览器窗口或输入新的URL,这是行不通的。
为了解决这个问题,您可能需要在页面上使用Javascript的setTimeout(),每隔几秒钟进行一次AJAX调用(取决于您想要知道用户是否已经离开的速度)。
其他回答
我知道这个问题已经被回答了,但如果你只想在实际浏览器关闭时触发一些东西,而不仅仅是在页面加载发生时,你可以使用以下代码:
window.onbeforeunload = function (e) {
if ((window.event.clientY < 0)) {
//window.localStorage.clear();
//alert("Y coords: " + window.event.clientY)
}
};
在我的例子中,我正在清除本地存储并用鼠标y坐标提醒用户,只有当浏览器关闭时,这将在程序内的所有页面加载中被忽略。
这里有一个替代的解决方案-因为在大多数浏览器的导航控件(导航栏,选项卡等)位于页面内容区域的上方,你可以检测到鼠标指针通过顶部离开页面,并显示一个“离开前”对话框。它完全不引人注目,它允许你在用户实际执行离开操作之前与他们进行交互。
$(document).bind("mouseleave", function(e) {
if (e.pageY - $(window).scrollTop() <= 1) {
$('#BeforeYouLeaveDiv').show();
}
});
缺点是,这当然是一种猜测,用户真的想要离开,但在绝大多数情况下,这是正确的。
页面可见性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);
你能做的就是在页面加载时打开一个WebSocket连接,可以选择通过WebSocket发送数据来标识当前用户,然后在服务器上检查连接何时关闭。
多亏了Service Workers,在浏览器支持的情况下,完全在客户端实现类似于Adam的解决方案成为可能。只需绕过心跳请求:
// The delay should be longer than the heartbeat by a significant enough amount that there won't be false positives
const liveTimeoutDelay = 10000
let liveTimeout = null
global.self.addEventListener('fetch', event => {
clearTimeout(liveTimeout)
liveTimeout = setTimeout(() => {
console.log('User left page')
// handle page leave
}, liveTimeoutDelay)
// Forward any events except for hearbeat events
if (event.request.url.endsWith('/heartbeat')) {
event.respondWith(
new global.Response('Still here')
)
}
})