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

JavaScript を使用した iframe 内のクリックの検出

ユーザーが iframe 内をクリックしたかどうかを判断する方法をお探しの場合は、次のようにします。 JavaScript ではクロスドメイン iframe を直接監視できないという制限に遭遇した可能性があります。それにもかかわらず、目標を達成するのに役立つ賢いテクニックがあります。

解決策は、iframe 上に非表示の div をオーバーレイすることです。 iframe 内でクリックが発生すると、オーバーレイしている div のクリック イベントもトリガーされます。このイベントをリッスンすることで、iframe 内のクリックを間接的に検出できます。

このアプローチを説明するコード例を次に示します。

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

// Ensure the main document has focus to register the blur event.
window.focus();

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

<div>

この例では、メッセージ div iframe 内でクリックが発生したときに、タイムスタンプとともに「クリックされました」を表示するために使用されます。このアプローチは、Chrome、Firefox、IE 11 (おそらく他のブラウザーでも) で効果的に機能することに注意してください。これは、特に使用される iframe タグを制御できない場合に、クロスドメイン iframe 内のユーザー操作を監視する簡単なソリューションを提供します。

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