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

Question

我们正在创建一个构建热图的点击跟踪应用程序。我正在编写一个脚本，用户应该将其插入到他们的页面中以进行跟踪。

它在不需要重定向或表单提交的元素上运行良好。例如，如果我单击 h1 或 p 或其他任何内容，它会完全正确。但是，如果我点击 a，在正常重定向之前，对我们服务器的请求永远不会发生。

在过去的几天里，我尝试了很多方法来做到这一点。首先，我尝试了一个普通的 AJAX 调用，因为它是一个跨域请求，我不得不使用 JSONP，但同样，该 AJAX 调用在重定向之前没有时间执行。添加 async: false 可以解决问题，但它不适用于 JSONP 请求。所以我决定添加一个标志变量，它指示继续使用重定向是安全的，并使用一个空的 while 循环等待它在 ajax 回调中变为 try。但是 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;
 }