使用新的Image（）進行點擊跟蹤是否安全？

我正在開發點擊跟蹤系統來監視我公司的產品在外部（客戶）網站上的使用情況。我希望能夠告訴我的客戶只需在使用onclick的任何元素上調用javascript調用即可。使用新的Image（）進行點擊跟蹤是否安全？

我目前的做法是使用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，它表明他們使用某種阻塞而不是事件處理和回調。但是，再次，他們的代碼是故意難以理解的。

我的問題是：

我可以肯定的說使用新的圖像（）的請求，在onclick事件SRC瀏覽器如下鏈接之前被解僱，或者我需要使用的延遲。？
這種行爲在瀏覽器和瀏覽器版本之間有所不同嗎？
是否有「最佳做法」做點擊跟蹤，我還沒有找到？

編輯：4，有誰知道谷歌Analytics（分析）是如何做的？他們似乎使用onclick =「MyFunction（）」的方法，沒有返回語句或回調。

來源

2012-02-15 DukeOf1Cat

隨着您發佈的代碼，您可以確定，如果您使鏈接唯一以避免從緩存中重新加載..請務必處理'onerror'事件以避免打破用戶網站.. – 2012-02-15 11:06:05

@Gaby你知道所有瀏覽器中是否有onerror？我讀過使用onload不是瀏覽器安全的。當我測試過它似乎與所有現代瀏覽器（即使IE7 +，如果我沒有記錯的話）工作正常 – DukeOf1Cat 2012-02-15 11:43:56

跟隨@ Gaby的評論，你應該使用某種方法來避免緩存的請求，你可以使用Date對象。你也應該以同樣的方式實現一個錯誤，所以你不會破壞網站。該代碼應該是這個樣子：

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。那樣，如果沒有事件在預期的時間內發生，那麼你就有了最終的回退。

來源

2012-02-15 11:17:50

啊，是的，我的URL有點複雜，涉及緩存防止。爲了舉例，我只是簡化了一下。但是，謝謝你指出了這一點！ – DukeOf1Cat 2012-02-15 11:41:48

我編輯了我的答案，回覆您的錯誤疑問 – 2012-02-15 11:49:09

謝謝，這是一個可以解決問題的解決方案。我仍然對Google如何設法做到這一點仍然感興趣，但沒有返回聲明或回調。也許他們附加了點擊事件，然後取消事件或其他事情？ – DukeOf1Cat 2012-02-15 12:07:48

使用新的Image（）進行點擊跟蹤是否安全？

回答

相關問題