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

它适用于不需要重定向或表单提交的元素。例如,如果我点击 h1p 或其他什么,它就完全正确。但是,如果我点击 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(),但这会使事情复杂化很多,相信我,调试它已经是一个巨大的痛苦不同浏览器中的脚本。

有没有人有其他想法?

最佳答案

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

关于javascript - 在重定向之前将有关单击链接的信息发送到服务器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10295354/

10-12 06:54
查看更多