链接点击跟踪在 Safari 浏览器上不起作用 [英] link Click tracking does not work on Safari browser
问题描述
我有一个基本的 html 页面，其中包含指向不同站点的链接.我想要做的是跟踪点击次数.我这样做是通过在链接的 Click 事件上发送 0 像素图像调用而不在单击事件上返回 false 来实现的.
I have a basic html page which has links that point to different site. What I want to do is track the clicks. I am doing so by sending a 0 pixel image call on Click event of the link without returning false on click event.
同样适用于除 Safari 之外的所有浏览器(在 Windows 操作系统上).
The same works fine on all the browsers except Safari(on windows OS).
当使用 javascript 单击链接时，我会延迟重定向并将图像请求发送到服务器并在服务器端记录单击.我试过增加延迟但没有成功......跟踪器在所有浏览器上都可以使用 gr8，除了 Safari 根本不发送请求.
when a link is clicked using javascript I delay the redirect and send an image request over to the server and log the click on server side. I have tried increasing the delay but with no success... The trackers work gr8 on all the browsers except Safari which does not sent the request at all.
我不知道为什么，但可能是因为 safari 在发出请求之前等待完整的 js 被执行，并且在整个 js 被执行后它被重定向....
I dont know why but possibly its that safari waits for the complete js to be executed before making the request and after the whole js is executed it gets redirected....
==========================================================
=========================================================
<html>
<head>
<script type="text/javascript">
function logEvent(){
image = new Image(1,1);
image.onLoad=function(){alert("Loaded");};
image.onLoad=function(){alert("Error");};
image.src='http://#path_to_logger_php#/log.php?'+Math.random(0, 1000) + '=' + Math.random(0, 1000);
pauseRedirect(500);
}
function pauseRedirect(millis){
var date = new Date();
var curDate = null;
do {curDate = new Date();}
while(curDate-date < millis);
}
</script>
</head>
<body>
<a href="http://www.google.com" onclick="logEvent(); return true;">Site 1</a><br/>
<a href="http://www.yahoo.com" onclick="logEvent(); return true;">Site 2</a><br/>
</body>
</html>
==========================================================
=========================================================
代码适用于 chrome、firefox、ie 和 Opera.仅在 Safari 上不起作用..... 任何线索....
Code works in chrome, firefox, ie and Opera. Does not work on Safari only..... any clues....
推荐答案
我在所有 WebKit 浏览器上都遇到了同样的问题.在所有其他情况下，您只需要执行 new Image().src = "url"，即使导航到新页面，浏览器也会发送请求.当您立即导航到新页面时，WebKit 将在请求发送之前停止请求.尝试了几种将图像注入文档的技巧，甚至 强制重新绘制通过img.clientHeight.我真的不想使用 event.preventDefault，因为当链接具有 target="_blank"、表单提交等时，这会导致很多麻烦.最终为支持 跨源资源共享，因为即使您无法读取响应，它也会将请求发送到服务器.同步请求有一个不幸的副作用，即在等待响应时锁定 UI 线程，因此如果服务器速度较慢，页面/浏览器将锁定，直到收到响应.
I had the same issue with all WebKit browsers. In all others you only need to do new Image().src = "url", and the browser will send the request even when navigating to a new page. WebKit will stop the request before it's sent when you navigate to a new page right after. Tried several hacks that inject the image to the document and even force a re-paint through img.clientHeight. I really don't want to use event.preventDefault, since that causes a lot of headaches when a link has target="_blank", form submit, etc. Ended up using a synchronous XmlHttpRequest for browsers supporting Cross Origin Resource Sharing, since it will send the request to the server even though you don't get to read the response. A synchronous request has the unfortunate side-effect of locking the UI-thread while waiting for response, so if the server is slow the page/browser will lock up until it receives a response.
var supportsCrossOriginResourceSharing = (typeof XMLHttpRequest != "undefined" && "withCredentials" in new XMLHttpRequest());
function logEvent() {
var trackUrl = 'http://#path_to_logger_php#/log.php?'+Math.random(0, 1000) + '=' + Math.random(0, 1000);
if(supportsCrossOriginResourceSharing) {
xhrTrack(trackUrl);
} else {
imgTrack(trackUrl);
}
}
function xhrTrack(trackUrl) {
var xhr = new XMLHttpRequest();
xhr.open("GET", trackUrl, false);
xhr.onreadystatechange = function() {
if(xhr.readyState >= this.OPENED) xhr.abort();
}
try { xhr.send() } catch(e) {}
}
function imgTrack(trackUrl) {
var trackImg = new Image(1,1);
trackImg.src = trackUrl;
}
这篇关于链接点击跟踪在 Safari 浏览器上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
