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

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

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

场景:

1. 点击 anchor 。
2. 提交表单。
3. 窗口重新加载。

如何解决这个问题？

Answer 1

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

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

如果 CORS 不是一个选项(您无法控制远程服务器)，您可以同步调用服务器上的服务器端脚本，该脚本使用 curl 调用远程服务器上的图像> 或您的编程语言中的类似工具，因为服务器端不会有跨源限制。