web-dev-qa-db-fra.com

Déclencher un événement personnalisé de l'iframe au document parent

J'ai du mal à déclencher un événement personnalisé dans une iframe et à le détecter à partir du document parent. Iframe et le document parent ont la même source (même protocole, même hôte, même port).

Des conseils?

javascriptjqueryiframe
34
Marco Cali

Cela marche:

parent.$('body').trigger('eventName');

l'événement déclenché à l'intérieur de l'iframe sera détecté dans le document parent.

34
Marco Cali

J'ai rencontré un problème similaire et j'ai utilisé window.postMessage Pour le résoudre.

Actuellement, l'API ne prend en charge que le passage d'une chaîne, mais si vous modifiez votre solution, elle peut être puissante. Plus de détails ici

Depuis la page source (consommée par un iframe):
L'API postMessage attend 2 paramètres - message, cible

ex: window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

Depuis la page parent (contient iframe. Par exemple, conteneur):

  1. Ajoutez un écouteur d'événements comme vous le feriez normalement

    window.addEventListener('message', handleMessage, false);

  2. Définissez votre fonction avec event.Origin check (pour la sécurité) \

    function handleMessage(event) {  
    if (event.Origin != "h ttp://child.com") { return; }  
    switch(event.data) {   
         case "HELLO_PARENT":  
            alert("Hello Child");  
            break;  
    } 
}
28
Ryan Safarian

Une réponse cohérente prenant en charge les iframes de même domaine et interdomaines consiste à utiliser le système d'événements.

L'objectif est d'envoyer un événement personnalisé de iframe au parent.

Dans le fichier source iframe:

var myCustomData = { foo: 'bar' }
var event = new CustomEvent('myEvent', { detail: myCustomData })
window.parent.document.dispatchEvent(event)

Et ajoutez ceci dans le fichier parent qui contient l'iframe:

window.document.addEventListener('myEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}
21
Farzad YZ

J'ai également trouvé mon moyen de résoudre ce problème avec jquery:

dans le fichier parent:

<body>
        <iframe src="something.html"></iframe>

</body>

<script>
 window.document.addEventListener('event', function(e){
            console.log("event:" + e.detail);
            $("iframe").contents().find(".class[title='" + e.detail + "']").css(someChanges);
</script>

donc vous vous n'avez pas besoin d'en ajouter d'autres EventListener dans vos iFrames.

bien sûr, vous voulez peut-être voir mon CustomEvent:

var test  = "1";
var event = new CustomEvent('event', { detail: test })
                window.document.dispatchEvent(event);

J'espère que je pourrais aider quelqu'un ...

2
samTT