クロスドメイン iframe 内のクリックを確実に検出するにはどうすればよいですか?

Iframe 内でユーザーのクリックを検出する方法

課題:

ユーザーがiframe 内でクリックしたことは、特に iframe が別のドメイン (いわゆるクロスドメイン iframe).

解決策:

iframe 内のクリックを検出するには、iframe の境界の真上にある非表示の div を使用する賢い回避策を採用できます。ユーザーが iframe 内の任意の場所をクリックすると、div はクリック イベントをインターセプトして iframe に転送します。

実装:

メイン ドキュメントで、次のコードを作成します。要素:

<div>
<p>次に、次の JavaScript を挿入します。コード:</p>
<pre class="brush:php;toolbar:false">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 は、オブジェクト内のアクティブな要素かどうかを確認します。メインドキュメントは IFRAME であり、クリックが iframe 内で発生したことを示します。
5. 確認された場合、#message div の textContent が現在の内容で更新されます。

この手法は、クロスドメインの場合でも、ユーザーが iframe 内をクリックしたかどうかを追跡する信頼性の高い方法を提供します。