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 サイトの他の関連記事を参照してください。