在重定向之前将有关已点击链接的信息发送到服务器

Question

我们正在创建一个构建热图的点击跟踪应用.我正在编写一个脚本,用户可以将其插入到他们的页面中以便跟踪工作.

它适用于元素,不需要重定向或表单提交.例如,如果我点击h1或p也好,它的工作原理完全正确的.但是,如果我点击a a,对我们的服务器的请求永远不会发生在正常的重定向之前.

在过去的几天里,我尝试了很多方法来做到这一点.首先,我尝试了一个普通的AJAX调用,因为它是一个跨域请求,我不得不使用JSONP,但同样,AJAX调用在重定向之前没有时间执行.添加async: false可以解决问题,但它不适用于JSONP请求.所以我决定添加一个标志变量,表明使用重定向继续运行是安全的,并使用空的while循环等待它在ajax回调中尝试.但while循环阻止了执行流程,因此回调从未有机会将该变量设置为true.这是一些简化的代码:

$(document).on('click', function (e) {
    //part of the code is omitted 
    $.ajax({
        url: baseUrl,
        data: data,
        type: "get",
        dataType: "jsonp",
        crossDomain: true,
        complete: function (xhr, status,) {
            itsSafeToMoveOn = true;
        }
    });

    while(!itsSafeToMoveOn){}

    return true;
});

我尝试的下一件事是使用unload页面事件等待,直到进行中的总ajax调用变为零(我有一个计数器实现),然后继续重定向.它在Firefox和IE中有效,但在WebKit中出现了这样的错误:

Error: Too much time spent in unload handler

之后我意识到我不关心服务器响应,并且img.src对请求的使用将是这种情况的理想选择.所以在这一点上代码看起来像这样:

$(document).click(function (e) {
    //part of the code is ommited
    (new Image).src = baseUrl + '?' + data;

    if (tag === "a" || clickedElement.parents().has("a")) {
        sleep(100); 
    }

    return true;
});

这样我略微提高了整体脚本性能,但链接问题仍未改变.该sleep函数似乎也阻止了执行流程,并且请求永远不会发生.

剩下的唯一想法是false从事件处理程序返回,然后手动重定向到单击的元素href或调用submit()表单,但它会使事情复杂化并相信我,在不同的调试此脚本的屁股已经是一个巨大的痛苦浏览器.

有没有人有任何其他想法？

Answer 1

var globalStopper = true;

$(document).on('click', function (e) {
    if (globalStopper === false)
        return true; //proceed with click if stopper is NOT set
    else {
        globalStopper = false; //release the breaks

        $.ajax({
            //blahblah
            complete: function (xhr, status,) {
                $(elem).click(); //when ajax request done - "rerun" the click
            }
        });
        return false; //DO NOT let browser process the click
    }
});

此外,尝试添加脚本,而不是添加图像.然后将脚本添加到HEAD部分.这样浏览器将"等待"直到它被加载.

 $(document).on('click', function (e) {
     var scriptTag = document.createElement("script");
     scriptTag.setAttribute("type", "text/javascript");
     scriptTag.setAttribute("src", url);
     document.getElementsByTagName("head")[0].appendChild(scriptTag);
     return true;
 }