Heim >Web-Frontend >js-Tutorial >Wie kann ich Klicks innerhalb eines domänenübergreifenden Iframes zuverlässig erkennen?

Wie kann ich Klicks innerhalb eines domänenübergreifenden Iframes zuverlässig erkennen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-30 15:30:11980Durchsuche

How Can I Reliably Detect Clicks Inside a Cross-Domain Iframe?

So erkennen Sie Benutzerklicks innerhalb eines Iframes

Herausforderung:

Bestimmen, ob ein Benutzer innerhalb eines Iframes geklickt hat, kann eine Herausforderung sein, insbesondere wenn der Iframe aus einer anderen Domain stammt (bekannt als domänenübergreifend). iframes).

Lösung:

Um Klicks innerhalb eines Iframes zu erkennen, kann eine clevere Problemumgehung eingesetzt werden, indem ein unsichtbares Div direkt über der Grenze des Iframes positioniert wird. Wenn der Benutzer irgendwo im Iframe klickt, fängt das Div das Klickereignis ab und leitet es an den Iframe weiter.

Implementierung:

Erstellen Sie im Hauptdokument Folgendes Elemente:

<div>

Fügen Sie dann das folgende JavaScript ein Code:

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 });

Erklärung:

  1. window.focus() stellt sicher, dass das Hauptdokument den Fokus hat, um den Unschärfe-Ereignis-Listener zu aktivieren.
  2. window.addEventListener("blur", ...) erfasst das Unschärfeereignis, das auftritt, wenn sich der Fokus vom Hauptobjekt entfernt document.
  3. Im Blur-Listener wird ein setTimeout verwendet, um die Ereignisverarbeitung leicht zu verzögern, um sicherzustellen, dass der Browser seinen internen Status aktualisiert hat.
  4. document.activeElement prüft, ob das aktive Element innerhalb des Das Hauptdokument ist ein IFRAME, der angibt, dass der Klick innerhalb des Iframes stattgefunden hat.
  5. Bei Bestätigung wird der textContent des #message-Divs mit dem aktuellen aktualisiert Zeitstempel und die Meldung console.log wird angezeigt.

Diese Technik bietet eine zuverlässige Möglichkeit, zu verfolgen, ob ein Benutzer innerhalb eines Iframes geklickt hat, auch wenn dieser domänenübergreifend ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Klicks innerhalb eines domänenübergreifenden Iframes zuverlässig erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn