Bagaimanakah Saya Boleh Mengesan Klik Di Dalam Iframe Merentas Domain dengan Amanah?

Cara Mengesan Klik Pengguna dalam Iframe

Cabaran:

Menentukan sama ada pengguna telah mengklik dalam iframe boleh mencabar, terutamanya apabila iframe berasal dari domain yang berbeza (dikenali sebagai domain silang iframes).

Penyelesaian:

Untuk mengesan klik dalam iframe, penyelesaian yang bijak boleh digunakan menggunakan div halimunan yang diletakkan betul-betul di atas sempadan iframe. Apabila pengguna mengklik di mana-mana dalam iframe, div memintas acara klik dan memajukannya ke iframe.

Pelaksanaan:

Dalam dokumen utama, cipta yang berikut elemen:

<div>
<p>Kemudian, masukkan JavaScript berikut kod:</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 });

Penjelasan:

1. window.focus() memastikan bahawa dokumen utama mempunyai fokus untuk membolehkan pendengar acara kabur.
2. window.addEventListener("kabur", ...) merakam peristiwa kabur, yang berlaku apabila fokus beralih daripada utama document.
3. Dalam pendengar kabur, setTimeout digunakan untuk melambatkan sedikit pemprosesan acara untuk memastikan penyemak imbas telah mengemas kini keadaan dalamannya.
4. document.activeElement menyemak sama ada elemen aktif dalam dokumen utama ialah IFRAME, menunjukkan bahawa klik berlaku dalam iframe.
5. Jika disahkan, teksKandungan div #mesej dikemas kini dengan cap masa semasa dan mesej console.log dipaparkan.

Teknik ini menyediakan cara yang boleh dipercayai untuk menjejak sama ada pengguna telah mengklik dalam iframe, walaupun ia merentas domain.