6

我想记录对链接的所有点击。

我写了一个小记录器，可以通过 url 调用（返回一个空页面）。此 url 使用 jquery-ajax-method 调用。但不幸的是，如果用户使用 firefox（在 IE 中一切正常），则不会记录每次点击。

我已经尝试了很多东西，但没有解决这个问题，有人有胶水吗？

HTML代码：

<a href="http://google.com" onclick="return loggClick();">Click</a>

JS-jQuery-脚本：

function loggClick(){
   $.ajax({
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
    });
    return true;
}

编辑：我在示例中错过了我必须在 js 调用中传递动态参数，因此“不可能”删除 onclick-event :(

4

5 回答 5

4

我将开始摆脱内联的“onclick”代码并稍后绑定事件：

  <a href="http://google.com" rel="outbound" >Click</a>


   $("a[rel=outbound]").click(function(){ 
        var url = this.href; 
        $.ajax({
        async: false,
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
                sid: 'abc123' //random data
                clicked: url
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
     });
     return true; 
  });

此外，您可能会发生“种族状况”。在我的示例中，我将 async 设置为 false。

这将在执行请求之前停止函数返回并跟踪链接。

关于异步

我async: false在这里使用的原因是因为默认情况下， aync 为 true，这意味着 AJAX 请求可能只有在浏览器看到时才部分传输return: true，并导航离开页面。

这就是我提到的“竞争条件”。在这里，这是一个廉价的技巧，通过使浏览器基本上停止直到请求完成，然后允许浏览器单击链接来避免它。

一个更复杂的答案是让它返回“false”，（这将杀死浏览器的原生“follow link”行为），然后在函数中执行真正的重定向。complete

这并非没有自己的问题，并且可能会导致请求完成时浏览行为缓慢，从而使用户有时间单击其他链接，这似乎什么也没做，然后最终一个请求在随机时间通过，并且看似随机发生重定向。

因此，高级解决方案包括阻止页面的其余部分并在请求完成时给出某种进度指示。

（因此，在一个简单的例子中，这个解决方案的复杂性比一个数量级更难实现async: false）

于 2009-03-19T14:43:03.070 回答
4

我认为 FF 给您带来糟糕结果的原因是您在操作需要时间执行之前离开了页面。正如 mhartman 的链接所提到的，如果您在外部链接上使用目标，它应该可以正常工作。如果您不能这样做，那么您可能必须等待日志完成，尽管您可能会看到导航延迟。

HTML 代码

<a href="http://google.com" onclick="return loggClick(event);">Click</a>

这

function loggClick(e) {
  if (!e) e = window.event;

  e.preventDefault();  // cancels the link

  var theLink = this.href;  // stores the link for later

  $.ajax({
     async: false,
     type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false,
         complete: function() {
           // navigate when the log completes
           this.location.href = theLink;
         }
    });
    return true;
  }
}
于 2009-03-19T14:44:12.990 回答
1

您可能没有想到的另一种服务器端方法是拥有一个页面来处理您的重定向并记录数据。

例如：

<a href="LoggerRedirect.ff?url=http://google.com">Click</a>
于 2009-03-19T14:56:03.303 回答
0

上面的海报是正确的，它是不可靠的，因为你在它有机会登录之前就离开了页面。

你可以这样做：

1) 返回 false，因此 href 无效。2) 记录点击 3) 使用 location.href 重定向到它会被重定向到的 url

如果您的 onclick 处理程序需要很长时间才能执行，您可能会看到轻微的延迟。

于 2009-03-19T15:03:23.363 回答
0

此示例将在处理链接单击之前触发 ajax 帖子。我发现我必须同步调用 ajax 否则 POST 将不会被执行。在这个例子中，我的 ajax 帖子是一个 PHP 页面，它附加了一个日志文件。这个例子很有效，因为它只将一个点击事件附加到窗口。它也不会干扰用户点击链接。

//attach click event to window
attachClickEvent = function() {
    $(document).on('click', function(e) { //document for IE8 compatibility
        var element = $(e.target);
        var tag = element.prop('tagName');

        if (tag === 'A') {
            var data = {'title':document.title, 'URL':element.attr('href'), 'origin':location.href};
            logData(data);
        }
    });
}

logData = function(data) {
    $.ajax({
        async: false,
        cache: false,
        type: "POST",
        data: data,
        url: 'logger.php',
        success: function(msg) { 
            //debugging
        },
        error: function() {
            //debugging
        }
    });
}
于 2013-07-22T16:19:50.900 回答