用戶點擊鏈接後可以操作DOM嗎？

我試圖理解瀏覽器一旦鏈接被點擊或者表單被提交時的行爲 - 任何由用戶觸發的操作，並以它們在新URL處登陸結束。我被要求在按鈕和鏈接上安裝一些跟蹤代碼，它依靠點擊更新一個不可見的iframe的src屬性。用戶點擊鏈接後可以操作DOM嗎？

所以 - 我的具體問題是：

我可以依靠的DOM是可操作的，一旦用戶點擊一個鏈接？也就是說，我可以更新節點上的屬性，並且可以保證在新頁面加載之前這會成功嗎？
這些操作觸發的任何請求（例如，我給iframe一個新的src屬性）是否可靠？顯然，新頁面在請求完成時已經加載 - 但是可能（但可能無法跟蹤）請求已成功完成。

我的直覺是這些都不可靠 - 我絕對不會寫這樣的系統我自己。我真的在尋找引用或規範，所以我可以做出更好的方法。

謝謝！

來源

2013-04-02 Beejamin

總之，第

一旦URL變化（與導航移動完全離開形成頁）爲完成本DOM一樣好。極少數情況下可能會發生更改，等待點擊操作生效並重新加載新頁面，但這非常不可靠。

在Web應用程序中處理跟蹤的正常方法是執行跟蹤服務器端，因爲這顯然代表用戶正在導航到的位置。

對於純粹的客戶端跟蹤實現，您需要提供一個鉤子，該鉤子捕獲點擊操作，執行任何跟蹤，然後在跟蹤過程完成後執行所需的操作。一種做法是實現文檔範圍的點擊事件，攔截所有點擊，跟蹤任何信息，然後根據需要委託操作。另一種方法是爲導航鏈接定義自己的點擊事件，但不幸的是，我個人只能爲此提供一個jQuery代碼片段，而不是標準JavaScript。

'karaxuna'提供的解決方案是對普通JavaScript文檔範圍機制的一個很好的展示。

更新

有關文檔，有助於強調爲什麼後期導航處理是不可靠的，請參考以下鏈接：

W3 navigation timing for web applications

來源

2013-04-02 13:02:27 TheManWithNoName

這是我正在尋找的答案。我不一定在尋找'我怎麼能？'解決方案 - 而是解釋這種類型的操作如何以及爲什麼不可靠。您是否知道此行爲的任何特定文檔或規範？ – Beejamin

此外，請參閱我對karaxuna的回答的評論：我不想捕獲該事件以進行跟蹤 - 尤其是當跟蹤依賴於第三方資源加載時 - 如果第三方沒有響應，我需要超時和回退 - yuck。 – Beejamin

在這種情況下，服務器端跟蹤不是一個選項。我的首選解決方案是爲目標網址添加一個標識符，並在該網頁上進行跟蹤：跟蹤用戶登陸時的情況，而不是他們離開時的情況。 – Beejamin

在所有操作完成後，您可以繼續頁面加載。就像這樣：

document.body.addEventListener('click', function(e){ 
    if(e.target.tagName.toLowerCase() === 'a'){ 
     e.preventDefault(); 
     var href = e.target.getAttribute('href'); 
     // do your job here 
     window.location.href = href; // navigate 
    } 
});

Fiddle

來源

2013-04-02 12:56:40 karaxuna

是的 - 我知道我可以捕獲該事件，但這意味着網站的主要功能（提交表單，單擊鏈接）依賴於輔助功能（跟蹤點擊）。這是相關的，也是一個好的解決方案，但這並不是我真正想要的。謝謝 - 有一個upvote！ – Beejamin

必須 '攔截' 之前，該事件被允許完成。這是最簡單的用jQuery完成的。你可以這樣做：

$(document).on(
    "click", 
    '.button', 
    function(e){ 
     //do fancy stuff like update the iframe here 
    });

來源

2013-04-02 12:57:42

用戶點擊鏈接後可以操作DOM嗎？

回答

相關問題