javascript - 使用 new Image() 进行点击跟踪是否安全？

Question

我正在开发一个点击跟踪系统来监控我公司产品在外部(客户)网站上的使用情况。我希望能够告诉我的客户只需使用 onclick 对任何元素进行 javascript 调用。

我目前的方法是使用 Image() 对象创建对我的跟踪服务器的请求。这很好用，但我怀疑这是否安全。如果我把它放在一个链接上，我能确定我的请求在浏览器点击链接之前被发送了吗？我的测试表明我不能。

所以我尝试使用 onclick="return MyFunction()"当且仅当图像加载完成时返回 true。但是，我无法在 Myfunction() 中阻塞线程时加载图像，因为 javascript 仅在一个线程上运行。因此，我必须使用阻塞调用来阻止请求 500 毫秒，这将降低请求未发送的风险，但会降低网站的性能。

另一种方法是在加载图像后使用回调等来处理页面切换。像这样的东西:

<a href="http://www.google.som" onclick="return MyFunction(this)">Link</a>

<script type="text/javascript">

function MyFunction(theLink)
{
var img  = new Image();
img.onload = function(){ location.href=theLink.href; }
img.src = "http://www.myserver.com/trackclick";

return false;

}

</script>

这将要求我的客户实现上述要求的功能。此外，如果由于某种原因无法加载图像(例如，如果我的服务器出现故障)，客户站点将会崩溃。

我检查了 Google 的 ga.js，它表明他们使用某种阻塞而不是事件处理和回调。但话又说回来，他们的代码故意难以理解。

我的问题是:

1. 我能否确保在浏览器点击链接之前触发在 onclick 事件中使用 new Image().src 的请求，或者我是否需要使用延迟？

2. 此行为在浏览器和浏览器版本之间是否不同？

3. 是否有我尚未找到的进行点击跟踪的“最佳实践”方法？

编辑:4. 有谁知道 Google Analytics 是如何做到的？他们似乎使用 onclick="MyFunction()"方法，既没有返回语句也没有回调。

Answer 1

跟进@Gaby 的评论，您应该使用某种方式来避免缓存请求，为此您可以使用 Date 对象。您还应该以相同的方式实现一个 onerror，这样您就不会破坏网站。代码应该类似于:

function MyFunction(theLink){
   var img  = new Image();
   img.onload = img.onerror = function(){ location.href=theLink.href; }
   img.src = "http://www.myserver.com/trackclick?d=" + new Date().getTime();
   setTimeout(function{location.href=theLink.href; }, 350);
   return false;
}

这样，如果您的服务器出现故障，它不会记录用户的点击，但网站会正常运行。向图像的 url 添加唯一查询字符串将阻止缓存请求。

如果由于浏览器不兼容导致 onload 或 onerror 执行失败，您还可以使用 setTimeout 将页面重定向到所需的 url。这样一来，如果没有任何事件在预期时间内触发，您就有了最终的回退。