2011-02-09 163 views
1

我有一個基本的html頁面,其中有指向不同站點的鏈接。我想要做的就是跟蹤點擊次數。我這樣做是通過在鏈接的Click事件上發送一個0像素圖像調用而不在點擊事件上返回false。鏈接點擊跟蹤在Safari瀏覽器上不起作用

對於除Safari之外的所有瀏覽器(在Windows操作系統上),這同樣工作正常。

當使用javascript點擊鏈接時我延遲重定向併發送圖像請求到服務器並記錄點擊服務器端。我試圖增加延遲,但沒有成功......追蹤器在除Safari之外的所有瀏覽器上工作gr8,它根本沒有發送請求。

我不知道爲什麼,但可能它對於整個JS野生動物園等待發出請求之前,整個JS執行的時候被重定向後執行....

======= ==================================================

<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只有.....任何線索....

+0

你是否在等待圖像完成加載或做像`setTimeout()`?我們可以看到一些代碼嗎? – alex 2011-02-09 13:54:52

回答

0

我對所有WebKit瀏覽器都有同樣的問題。在所有其他情況下,您只需要執行新的Image()。src =「url」,即使導航到新頁面,瀏覽器也會發送請求。 WebKit會在請求立即導航到新頁面之前停止請求。嘗試了幾次將圖像注入到文檔中的黑客,甚至通過img.clientHeight登錄到force a re-paint。我真的不想使用event.preventDefault,因爲當一個鏈接有target =「_ blank」,表單提交等時會引起很多頭痛。最後,使用支持Cross Origin Resource Sharing的瀏覽器的同步XmlHttpRequest,因爲它會發送即使您不讀取響應,也會向服務器發送請求。同步請求具有在等待響應時鎖定UI線程的不良副作用,因此如果服務器速度較慢,則頁面/瀏覽器將鎖定,直至收到響應。

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