在离开页面时进行 ajax 调用答案

【问题标题】：Making ajax call on navigating away from page在离开页面时进行 ajax 调用
【发布时间】：2014-08-15 07:59:59
【问题描述】：

我正在开发一个有多个指向其他网站的链接的网站。我想要的是发送一个ajax调用来报告当有人点击并离开页面时用户正在离开。我在点击链接时发出警报，这有效，但由于某种原因，控制器永远不会得到 ping。

任何有关如何实现它的帮助将不胜感激。

【问题讨论】：

标签： javascript jquery ajax node.js

【解决方案1】：

做不到。

当您导航离开时，只有一个事件可以捕捉到它，即onbeforeunload 事件，它的功能非常有限。

更不用说还有其他方法可以在不导航的情况下离开页面：

失去网络连接
关闭浏览器。
失去动力。

您唯一能做的就是设置一个heartbeat 之类的东西，每隔几毫秒就对服务器执行一次 ping 操作并显示“我还活着”。

但是，根据您要执行的操作，通常会有更好的选择。

【讨论】：

hmm... 我想要的是保留被访问的链接日志，因此我想从页面重定向到 ping 控制器，我无法理解的是，如果警报显示然后为什么 ajax 调用不起作用？
因为浏览器会在 ajax 调用有机会完成之前离开。这就像在订购比萨饼时挂断电话一样。至于如何记录某人关注的链接——您通过链接转发器运行这些链接...<a href="http://example.com/forward?url=http://example2.com/>example2.com</a>
是的，你是对的，它在我的一台较慢的机器上工作，但在其他地方不能工作，转发器是如何工作的？
@Babar 您必须为此打开一个新问题并说出您在后端使用的内容。
感谢 Jeremy，但我必须选择另一个正确的答案，因为它有助于解决我自己域中的问题。还是谢谢你。

【解决方案2】：

您可以尝试简单地设置click 事件处理程序，它将在导航之前检查每个链接的href 属性。如果它转到另一个网站，处理程序会发送 AJAX 请求，然后（在服务器响应后）重定向到该页面。

var redirect = '';
$('a').click(function() {
    if (this.href.host != document.location.host) {
        if (redirect) return false; // means redirect is about to start, clicking other links has no effect
        redirect = this.href;
        $.ajax({
            url: '/away', 
            success: function(){document.location.href = redirect;}
        });
    return false;
});

但是，如果用户在多个选项卡中打开了您的页面，它就无法正常工作。

【讨论】：

是的，呼叫正在注册，但成功重定向没有发生
那么可能是服务器端错误。也许响应返回代码！= 200，这就是“成功”事件不起作用的原因。尝试“完成”完成。
是的，我根本没有发送任何响应 0_o

【解决方案3】：

目前唯一可靠的方法是挂钩（即添加事件侦听器）您的代码在所谓的sendBeacon 方法中来自Beacon API 的beforeunload 事件（即当用户尝试离开页面）。

navigator.sendBeacon() 方法通过 HTTP 将少量数据异步发送到 Web 服务器。它旨在用于将分析数据发送到 Web 服务器，并避免了用于发送分析的传统技术的一些问题，例如使用 XMLHttpRequest：

<script>
var URL = 'https://your.domain/your-page.php';
// on 'beforeunload'
window.addEventListener('beforeunload', function (event) {  
    navigator.sendBeacon(URL);
    // more safely is to wait a bit
    var wait_until = new Date().getTime() + 500;
    while (new Date().getTime() <= wait_until);
});
</script>

【讨论】：

【解决方案4】：

你可以试试：

$(window).on('beforeunload', function(){
    return "This should create a pop-up";
});

【讨论】：

但是你不能通过onbeforeunload发送一个ajax请求。

【解决方案5】：

您可以通过捕获页面上所有链接（或所有相关链接）的点击来实现它，然后在其上调用ev.preventDefault() 以防止浏览器直接导航到该页面。

相反，您可以对您的服务器进行 AJAX 调用，当该调用返回时，您可以将 window.location 设置为用户尝试导航到的 URL。

【讨论】：

这不是有点hacky吗？但它会起作用，让我试试:)

【解决方案6】：

这是您可以尝试的解决方法。

在页面加载时，使用 jquery 将所有 href 属性移动到 tempHref 属性中。然后，附加一个方法来捕获点击事件。

这样，点击链接不会自动移动到预期的目的地。当点击发生时，只需执行ajax调用，然后使用javascript，移动到另一个页面。

$('a').each(function () {
    var link = $(this);
    link.attr('tempHref', link.attr('href'));
    link.removeAttr('href');
});

$(document).on('click', 'a', function ()
{
    //perform ajax call;
    location.href = $(location).attr('tempHref');
});

【讨论】：