首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >当用户导航离开时触发事件

当用户导航离开时触发事件
EN

Stack Overflow用户
提问于 2013-04-10 20:01:12
回答 2查看 35.4K关注 0票数 32

我需要在PHP页面上调用一个JavaScript/jQuery函数,该函数包含几行代码,当用户关闭其窗口/选项卡或单击链接导航离开时。我尝试过onbeforeunload函数,但只执行return "blah blah blah;"部分,其他所有内容都被忽略。我还尝试了jQuery中的.unload方法,但由于某种原因,这段代码无法运行。

代码语言:javascript
复制
$(window).unload(function() {
    alert('blah blah blah');
});

请推荐替代方案。谢谢..

EN

回答 2

Stack Overflow用户

发布于 2020-02-08 06:19:13

这是一个老问题,但我想分享另一种方法,该方法具有高一致性的好处:

建立到服务器的WebSocket连接,当客户端离开时,WebSocket连接将关闭。在服务器端,您可以在回调中检测关闭的连接,并在服务器上运行所需的任何代码。

在页面卸载时执行Javascript通常是不可靠的(正如在另一个答案中所讨论的那样),因为它本质上与用户的意图不一致。这种方法总是有效的,尽管不可否认,它的实现要麻烦一些。

这确实改变了“离开前运行”代码的上下文,从客户端到服务器端,但我认为对于大多数情况来说,这种差异是无关紧要的。在客户端离开页面之前,您想要在客户端运行的任何内容可能不会改变客户端看到的任何内容,因此在服务器端运行可能是很好的。如果您需要来自客户端的特定数据,您可以通过WebSocket将其发送到服务器。

我能想到的唯一可能导致意外行为的情况是,如果用户在没有真正离开的情况下就失去了WS连接,例如,他们失去了互联网或使他们的计算机进入睡眠状态。这是否是一个大问题可能高度依赖于您试图执行的代码类型。

票数 2
EN

Stack Overflow用户

发布于 2021-08-16 21:16:17

这是一种痛苦,因为Chrome,至少在92.0.4515.131版本中,似乎将安全螺丝夹在你可以在beforeunload中逃脱的安全螺丝上。例如,我无法发出同步ajax请求。

如果用户有机会再次访问您的站点,您可以等到那时再处理他们关闭了一个窗口的问题(这在我的用例中确实有效),要知道在beforeunload事件期间设置cookie似乎是公平的。甚至在我关闭浏览器时也能正常工作。它似乎涵盖了几乎所有的东西,除了重新打开计算机的电源。

下面是一个参考示例(从this SO question窃取了getCookie ):

代码语言:javascript
复制
function setCookie(name, value) {
    document.cookie =
        '{0}={1};expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/;SameSite=Lax'
            .replace("{0}", name)
            .replace("{1}", value);
}

// https://stackoverflow.com/a/25490531/1028230
function getCookie(cookieName) {
    var b = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
    return b ? b.pop() : '';
}

window.addEventListener('beforeunload', function (e) {
    console.log('cookie value before reset: ' + getCookie('whenItHappened'));

    var now = +new Date();
    console.log("value to be set: " + now);
    setCookie('whenItHappened', now);

    return "some string if you want the 'are you sure you want to leave' dialog to appear";
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15925251

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档