Question

当用户关闭窗口/标签或通过单击链接导航时，我需要在PHP页面上调用JavaScript / jQuery函数，其中包含几行代码。我已经尝试了onbeforeunload函数，但只执行了return "blah blah blah;"部分，其他所有内容都被忽略了。我也尝试过jQuery中的.unload方法，但由于某种原因，这段代码没有运行。

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

请建议替代方案。感谢..

Answer 1

这是一个简单的工作示例。无论return回调中的unload是什么，都会在浏览器弹出式确认中显示。

卸载前发送Ajax请求的工作示例 http://jsfiddle.net/alexflav23/hujQs/7/

最简单的方法：

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.onbeforeunload只是一种额外的预防措施，但不是主要机制。众所周知会引起问题。

Answer 2

这是一个古老的问题，但是我想分享一种替代方法，该方法具有保持高一致性的优势：

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

在页面卸载时执行Javascript通常是不可靠的（如其他答案所述），因为它与用户的意图本质上是不一致的。尽管该方法实施起来相当麻烦，但它始终可以使用。

这确实将客户端的“离开之前运行”代码的上下文从客户端更改为服务器端，但是我认为在大多数情况下，这种区别是无关紧要的。您希望在客户端离开页面之前在客户端运行的任何内容都不会改变客户端看到的任何内容，因此在服务器端运行它可能很好。如果需要客户端提供的特定数据，则可以通过WebSocket将其发送到服务器。

我能想到的唯一可能导致意外行为的情况是，如果用户丢失WS连接而没有实际离开，例如他们失去了互联网或使计算机进入睡眠状态。究竟是否重要，很大程度上取决于您要执行哪种代码。

Answer 3

在我的许多项目中，此处提到的方法不稳定。 对我来说唯一有用的是将事件绑定为body元素上的原始属性。

<body onunload="my_function_unload()">

jQuery方法：

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

在iframe中：

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

jQuery方法：

$('<iframe />').load(function(){
    $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）

用户导航时触发事件

3 个答案: