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

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

javascript jquery events

Javascript 当用户导航离开时触发事件,javascript,jquery,events,Javascript,Jquery,Events,我需要在PHP页面上调用JavaScript/jQuery函数，当用户关闭窗口/选项卡或通过单击链接导航离开时，该函数中有几行代码。我已经尝试了onbeforeuload函数，但是只有返回“blah blah blah；”部分执行，其他所有内容都被忽略。我还尝试了jQuery中的.unload方法，但由于某些原因，此代码无法运行 $(window).unload(function() { alert('blah blah blah'); }); 请提出替代方案。谢谢。这里是一个简单的工

我需要在PHP页面上调用JavaScript/jQuery函数，当用户关闭窗口/选项卡或通过单击链接导航离开时，该函数中有几行代码。我已经尝试了

onbeforeuload

函数，但是只有

返回“blah blah blah；”

部分执行，其他所有内容都被忽略。我还尝试了jQuery中的

.unload

方法，但由于某些原因，此代码无法运行

$(window).unload(function() {
    alert('blah blah blah');
});

请提出替代方案。谢谢。

这里是一个简单的工作示例。无论您从

unload

回调返回什么，都将在浏览器弹出确认窗口中显示

卸载前发送Ajax请求的工作示例
最简单的方法是：

window.onbeforeunload = function(event) { // do stuff here return "you have unsaved changes. Are you sure you want to navigate away?"; };
在jQuery中：

$(window).on("beforeunload", function() { $.ajax("someURL", { async: false, data: "test", success: function(event) { console.log("Ajax request executed"); } }); return "This is a jQuery version"; });
查看浏览器的“网络”选项卡。您将看到请求是如何按照您希望的方式发送的。只需发送适当的数据
请记住，所有触发的操作都必须是同步的，因此，例如，您只能进行同步ajax请求。然而，上述情况在任何方面都不完全可靠

选择定期将用户数据备份到
localStorage
，并自动与服务器同步。保持
window.onbeforeuload
只是作为额外的预防措施，而不是作为主要机制。众所周知，这会导致问题。
这是一个老问题，但我想分享一种具有高一致性优势的替代方法：
建立到服务器的WebSocket连接，当客户端离开时，WebSocket连接将关闭。在服务器端，您可以在回调中检测关闭的连接，并在服务器上运行所需的任何代码
在页面卸载时执行Javascript通常是不可靠的（正如在另一个答案中所讨论的），因为这与用户的意图有内在的矛盾。这种方法总是有效的，尽管它的实现确实有点麻烦
这确实会将“离开前运行”代码的上下文从客户端更改为服务器端，但我认为在大多数情况下，这种差异是无关紧要的。在客户端离开您的页面之前，您想要在客户端运行的任何东西都可能不会改变客户端看到的任何东西，因此在服务器端运行它可能是好的。如果您需要从客户端获取特定数据，可以通过WebSocket将其发送到服务器

我能想到的唯一一种可能导致意外行为的情况是，如果用户在没有实际导航的情况下丢失了WS连接，例如，他们失去了internet或将计算机置于睡眠状态。这是否重要，可能很大程度上取决于您试图执行的代码类型。
在我的许多项目中，这里提到的方法是不稳定的。对我来说唯一有效的方法就是将事件绑定为body元素的原始属性

<body onunload="my_function_unload()">
从iframe：

<body onunload="window.parent.my_function_unload()">

jQuery方法：

$('body').attr('onunload', 'my_function_unload()');

$('<iframe />').load(function(){ $body = $(this).contents().find('body'); $body.attr('onunload', 'window.parent.my_function_unload()'); }

$（''）.load（函数（）{ $body=$（this.contents（）.find（'body'）； $body.attr（'onunload'，'window.parent.my_function_unload（）'）； }
另外，重要，属性中没有参数，函数必须在全局窗口范围内，否则不会发生任何事情

例如，如果您的
my_function_unload（）
被包装在
；（function（$）{…
或
$（document）.ready（function（）{…
AS
my_function_unload（）中，则是常见错误
必须在该私有范围之外。不要忘记使用
jQuery
而不是
$
前缀。（例如，使用Wordpress）
卸载时您想做什么？我需要对PHP执行Ajax调用以取消设置会话变量。
通过单击链接导航。这表明您必须在文档上绑定卸载$（窗口）。on（'beforeunload'，function（）{…}）；，但您无法停止卸载页面，因此您只有很短的时间来执行操作，问题是您尝试执行的操作是否花费太长时间，页面是否会卸载。此操作的可能重复项不起作用。无论用户是否确认警告，始终会调用beforeunload。我需要运行一些清理，但我只有在用户实际离开时才想运行清理。我怎么做？@JohnHenckel没有办法这样做。@apscience，谢谢。这似乎是浏览器规范中的一个缺陷。例如，我想制作一个网页来编辑数据库中的一行，我想锁定该行以防止其他用户更改它。唯一的解决方案是found是每隔几秒钟向服务器发送一个心跳信号，以便服务器知道何时解锁。但是，这有一个严重的缺陷，因为当任何“确认”框已打开，JS引擎已暂停，因此心跳停止，即使用户仍在编辑！也许有一天浏览器将取代操作系统，但现在它作为应用程序平台太差劲了！抱歉迟到了，但要实现这一点，您可以使用和的组合。您可以在onbefo的返回中显示警告文本reunload和onunload中的任何清理。如果选择“保留”选项，将不会调用onunload。请确保在onbeforunload和onunload中使用同步调用。如果需要帮助，可以提供一些示例。@Tyler 4年过去了：）