web-dev-qa-db-fra.com

Écoutez les événements dans iFrame

J'ai donc une page principale (a) et une page d'aperçu (b) intégrée à la page principale via un iframe. La page (b) déclenche un événement spécial:

$(document).trigger('preview.compiled');

Maintenant, je veux que la page principale (a) écoute cet événement et fasse quelque chose alors:

$('iframe').contents().on('preview.compiled', function() {
    console.log('Success');
});

Cependant, le code ci-dessus ne fonctionne pas. Des idées?

javascriptjqueryiframe
8
sdvnksv

la fonction trigger() de jQuery ne déclenche que les rappels ajoutés via .on() de sa propre instance. Ainsi, jQuery au sein de votre iframe ne déclenchera que les rappels définis à l'aide de cette instance, pas ceux définis via l'instance jQuery de votre page principale.

Vous pouvez plutôt appeler dispatchEvent() en transmettant votre propre objet événement.

document.dispatchEvent(new Event('preview.compiled'));

Vous pouvez également utiliser window.onMessage/window.postMessage ou Broadcast Channel api avec des navigateurs modernes.

window.onMessage/window.postMessage, vérifier la prise en charge du navigateur

//in main window
window.addEventListener('message',function(message){
  if(message.data.type=="preview.compiled"){
    //do something
  }
});

//in iframe
parent.postMessage({
  type:'preview.compiled",
  other:"other data to pass"
},"url of main window");

Broadcast Channel API onMessage/postMessage, vérifier la prise en charge du navigateur

//Main window
var bc = new BroadcastChannel('preview:compiled');
bc.onmessage = function(message){
   console.log(message.data);
};

//iframe
var bc = new BroadcastChannel('preview:compiled');
bc.postMessage('Some data');
4
Patrick Evans

Essayez le parent. $ ('Body'). Trigger ('preview.compiled');

0
Sudhir Kumar