Question

我们正在使用javascript监控用户操作，以改善我们网站的用户体验。

Javascript代码

$("html").bind("mousedown", function(e) {
     var img = new Image(); 
     img.src="http://monitor.example.com/track.gif?x="+e.pageX+"&"+e.pageY});

我正在使用图片标记来避免跨域问题。除了以下情况外，它工作正常。

方案：

点击锚点。
表格提交。
重新加载窗口。

如何解决这个问题？

Answer 1

在图片有机会下载之前页面将会消失 - 页面刷新/发布/链接点击通常会比下载图片更快。

最好建议您同步执行图像（或任何URL）的请求，也许使用AJAX调用。然后在图像下载完成后继续执行，而不是并行发生并导致您当前看到的竞争条件。假设您可以控制远程服务器，可以使用Cross-Origin Resource Sharing来实现。

如果CORS不是一个选项（您无法控制远程服务器），您可以使用curl或者同步调用服务器上的服务器端脚本来调用远程服务器上的映像。编程语言中的类似工具，因为服务器端不存在跨源限制。

Answer 2

#try this code
var monitor = function(e) {
     var img = new Image(); 
     img.src="http://monitor.example.com/track.gif?x="+(e.pageX || 'null')+"&y="+(e.pageY || 'null');
};

# reload page
$(document).bind("beforeunload", monitor);

# mouse down global
$(document).bind("mousedown", "*", monitor);

另外，需要修改这个，因为页面刷新不会发送pageX pageY

如何等待浏览器在卸载时发送图像请求？

2 个答案: