Maison >interface Web >js tutoriel >Comment puis-je détecter les clics dans un iFrame inter-domaines à l'aide de JavaScript ?

Comment puis-je détecter les clics dans un iFrame inter-domaines à l'aide de JavaScript ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-30 03:16:14213parcourir

How Can I Detect Clicks Inside a Cross-Domain iFrame Using JavaScript?

Capturer les clics dans les iFrames inter-domaines avec JavaScript

La détection des interactions utilisateur dans les iFrames inter-domaines peut s'avérer difficile en raison des restrictions de sécurité. Cependant, il est possible de savoir si un clic a eu lieu dans une iframe en utilisant une approche créative.

Solution :

Pour capturer les événements de clic à partir d'une iframe, considérez la approche suivante :

1. Créer un div invisible :

Placez un div invisible directement sur l'iframe. Ce div capturera tous les clics dans l'iframe.

2. Utilisez l'événement de flou de fenêtre :

Lorsque l'utilisateur clique dans l'iframe, la fenêtre parent perd le focus. En écoutant l'événement de flou de fenêtre, vous pouvez détecter le clic.

3. Vérifiez l'élément actif :

Dans le gestionnaire d'événements de flou, vérifiez si l'élément actif est un IFRAME. Si tel est le cas, le clic s'est produit dans l'iframe.

4. Notifier l'événement :

Mettre à jour un élément spécifié, tel qu'un

, pour indiquer qu'un clic a eu lieu dans l'iframe.

Extrait de code :

L'exemple suivant montre comment mettre en œuvre cela solution :

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

Remarque :

Cette solution peut ne pas être compatible avec tous les navigateurs et peut présenter des problèmes de synchronisation et de gestion du focus. Il est recommandé de tester et de personnaliser le code en fonction de votre application spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn