Javascript Girl
  1. Javascript Girl
  3. Capture cliquez sur div entourant un iframe
Intereting Posts
Javascript: AppendChild Comment comparer les chaînes Unicode en Javascript? Dans Google Chrome, comment puis-je apporter une fenêtre contextuelle existante vers l'avant en utilisant javascript à partir de la fenêtre parent? Peut-on se référer à des variables JavaScript dans les pages Web dans une session de navigateur? Focus et flou des événements jQuery ne bouillonnant pas L'onglet Outil de développement Web Chrome Network indique que les demandes Dojo AJAX nécessitent environ 44 ans pour terminer D3.js ne chargent que des parties de données / Synchroniser des données Regex.test VS string.match pour savoir si une chaîne correspond à une expression régulière Fonction javascript vs. (function () {…} ()); Capturez la valeur de la chaîne de requête avec regex? Obtenir l'adresse formatée complète à partir du géocodage inversé Exécuter setTimeout uniquement lorsque l'onglet est actif Impossible de renvoyer la chaîne de la valeur de l'élément dans le test du rapporteur Comment puis-je avoir JavaScript pour ouvrir une fenêtre contextuelle sur le moniteur actuel Comment masquer le curseur clignotant de la zone de texte?

Capture cliquez sur div entourant un iframe

Comment puis-je capturer un événement de clic ou de mousedown sur un div entourant un iframe. J'ai essayé de joindre le funciton à l'événement de clic sur le div, mais puisque l'iframe ne fait jamais exploser l'événement jusqu'à la division environnante, la fonction n'est jamais appelée. Existe-t-il une façon de capturer l'événement sur le div et ensuite de le propager à l'iframe pour l'action par défaut

Si le clic se trouve dans la zone de l'iframe, le contexte de l'iframe gère l'événement de clic, il ne bouleverse pas le parent de l'iframe. Donc, le div ne enregistrera jamais l'événement de clic du tout s'il s'est produit dans la zone Iframe.

En outre, si l'iframe contient une page qui n'appartient pas au même domaine que le parent iframe, toute interaction est interdite (re. Même politique d'origine ).

Lorsque la même politique d'origine est respectée, il y a quelques choses que vous pouvez faire, vous pouvez appeler une méthode dans le contexte parent iframe: 

top.parentFunction();

Ainsi, dans l'iframe, vous ajoutez un auditeur d'événements qui délègue au parent iframe (accessible avec la référence top .

La propagation des événements est beaucoup plus compliquée, alors je vais simplement me référer à la bibliothèque NWEvents de Diego Perini . Je crois que son système événementiel est l'un des meilleurs là-bas et il est particulier sur l'interaction avec l'iframe.

Je ne commencerais certainement pas à écrire votre propre code pour y parvenir, cela peut facilement être un projet d'une année si vous voulez le faire correctement et même alors sera inférieur au travail de Diego.

Il n'y a pas de «bon» moyen de le faire, mais si vous avez vraiment besoin de détecter un clic sur un Iframe, vous pouvez le faire dans les derniers navigateurs. 

 <iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe> <script type="text/javascript"> var inIframe = false; function checkClick() { if (document.activeElement && document.activeElement === document.getElementById("iframe")) { if (inIframe == false) { alert("iframe click"); inIframe = true; } } else inIframe = false; } setInterval(checkClick, 200); </script>

Ce script vérifiera tous les 200 ms si l'utilisateur se trouve dans l'Iframe. Bien sûr, ils n'ont peut-être pas cliqué sur l'Iframe pour y arriver, mais je crains que ce soit le meilleur que vous puissiez faire sans la solution de @BGerrissen.

Il ne détectera que le premier «clic», sauf si vous cliquez à nouveau. Cela fonctionne uniquement dans des navigateurs vraiment modernes.

Vous pouvez utiliser une bibliothèque comme hublot pour transmettre des messages entre parent et iframe, même à travers des domaines. L'utilisation de cela ne propage pas exactement l'événement (vous ne pourrez pas obtenir l'objet de l'événement), mais vous pouvez créer votre propre événement sous la forme d'un message simple, puis manipuler le parent comme un clic.

Voici leur exemple

Cependant, j'ai utilisé la réponse de Brendon car il est plus simple pour mes besoins actuels.