Comment puis-je détecter de manière fiable les clics dans une Iframe inter-domaines ?

Comment détecter les clics des utilisateurs dans une Iframe

Défi :

Déterminer si un utilisateur a cliqué dans une iframe peut être difficile, en particulier lorsque l'iframe provient d'un domaine différent (appelé inter-domaine). iframes).

Solution :

Pour détecter les clics dans une iframe, une solution de contournement intelligente peut être utilisée en utilisant un div invisible positionné directement au-dessus de la limite de l'iframe. Lorsque l'utilisateur clique n'importe où dans l'iframe, le div intercepte l'événement de clic et le transmet à l'iframe.

Implémentation :

Dans le document principal, créez ce qui suit éléments :

<div>

Ensuite, insérez le JavaScript suivant 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 });

Explication :

1. window.focus() garantit que le document principal a le focus pour activer l'écouteur d'événement de flou.
2. window.addEventListener("blur", ...) capture l'événement de flou, qui se produit lorsque le focus s'éloigne du principal document.
3. Dans l'écouteur de flou, un setTimeout est utilisé pour retarder légèrement le traitement de l'événement afin de garantir que le navigateur a mis à jour son état interne.
4. document.activeElement vérifie si l'élément actif dans le Le document principal est un IFRAME, indiquant que le clic s'est produit dans l'iframe.
5. Si confirmé, le textContent du div #message est mis à jour avec le courant l'horodatage et le message console.log s'affiche.

Cette technique fournit un moyen fiable de savoir si un utilisateur a cliqué dans une iframe, même lorsqu'elle concerne plusieurs domaines.

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!