如何可靠地偵測跨域 iframe 內的點擊？

如何偵測Iframe 內的使用者點擊

挑戰：

解決方案：

要偵測 iframe 內的點擊，可以採用巧妙的解決方法，使用位於直接上方的不可見 div iframe 的邊界。當使用者點擊 iframe 內的任意位置時，div 會攔截點擊事件並將其轉發到 iframe。

實作：

在主文檔中，建立以下內容elements:

<div>

然後，插入以下JavaScript程式碼：

const message = document.getElementById("message");

window.focus();

window.addEventListener("blur", () => {
  setTimeout(() => {
    if (document.activeElement.tagName === "IFRAME") {
      message.textContent = "clicked " + Date.now();
      console.log("clicked");
    }
  });
}, { once: true });

說明：

1. window.focus() 確保主文件具有焦點以啟用模糊事件偵聽器。
2. window.addEventListener("blur", ...) 捕捉模糊事件，該事件在焦點移離主視窗時發生document.
3. 在模糊監聽器中，setTimeout 用於稍微延遲事件處理，以確保瀏覽器已更新其內部狀態。
4. document.activeElement 檢查是否有活動元素在main document 是一個 IFRAME，表示點擊發生在 iframe 內。
5. 如果確認，#message div 的 textContent 將更新為目前時間戳，並且將顯示 console.log 訊息。

此技術提供了一種可靠的方法來追蹤使用者是否在 iframe 內單擊，即使是跨域也是如此。

以上是如何可靠地偵測跨域 iframe 內的點擊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！