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?
Cela marche:
parent.$('body').trigger('eventName');
l'événement déclenché à l'intérieur de l'iframe sera détecté dans le document parent.
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):
Ajoutez un écouteur d'événements comme vous le feriez normalement
window.addEventListener('message', handleMessage, false);
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;
}
}
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'}
}
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 ...