JavaScript を使用してクロスドメイン iFrame 内のクリックを検出するにはどうすればよいですか?

JavaScript を使用したクロスドメイン iFrame 内のクリックのキャプチャ

クロスドメイン iFrame 内のユーザー インタラクションの検出は、セキュリティ制限により困難な場合があります。ただし、創造的なアプローチを使用して iframe 内でクリックが発生したかどうかを追跡することは可能です。

解決策:

iframe からクリック イベントをキャプチャするには、次のことを考慮してください。次のアプローチ:

1.非表示の Div を作成します:

iframe の上に直接非表示の Div を配置します。この div は、iframe 内のクリックをキャプチャします。

2. Window Blur イベントを利用します:

ユーザーが iframe 内をクリックすると、親ウィンドウのフォーカスが失われます。ウィンドウブラーイベントをリッスンすることで、クリックを検出できます。

3.アクティブな要素を確認します:

ブラー イベント ハンドラー内で、アクティブな要素が IFRAME であるかどうかを確認します。そうであれば、クリックは iframe 内で発生しました。

4.イベント通知:

iframe 内でクリックが発生したことを示すために、

などの指定された要素を更新します。

コード スニペット:

次の例は、これを実装する方法を示しています。解決策:

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

// Focus main document to detect iframe clicks
window.focus();

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

注:

この解決策はすべてのブラウザと互換性があるわけではなく、タイミングとフォーカスの処理に問題が発生する可能性があります。特定のアプリケーションに合わせてコードをテストしてカスタマイズすることをお勧めします。

以上がJavaScript を使用してクロスドメイン iFrame 内のクリックを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。