在离开页面时进行 ajax 调用

Question

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

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

Answer 1

做不到。

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

更不用说还有其他离开页面而不导航的方法：

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

你唯一能做的就是设置一种heartbeat类型的东西，每隔几毫秒就ping服务器并说“我还活着”。

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

Answer 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;
});

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

Answer 3

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

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>

Answer 4

你可以试试：

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

Answer 5

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

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

Answer 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');
});