我们正在创建一个点击跟踪应用程序,用于构建热图。我正在编写一个脚本,用户应该将其插入到他们的页面中以便跟踪工作。
它适用于不需要重定向或表单提交的元素。例如,如果我点击 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()
,但这会使事情复杂化很多,相信我,调试它已经是一个巨大的痛苦不同浏览器中的脚本。有没有人有其他想法?
最佳答案
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/