CODEWITHSUNDEEP
javascriptjqueryiframe
sdvnksv
sdvnksv

Reputation: 9678

Listen to events inside iFrame

So I have a main page (a) and a preview page (b) embedded into the main page via an iframe. The page (b) triggers a special event:

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

Now I want the main page (a) to listen to this event and do something then:

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

However, the code above doesn't work. Any ideas?

Upvotes: 24

Views: 33851

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42756

jQuery's trigger() only triggers the callbacks that were added through .on() of its own instance. So the jQuery within your iframe is only going to trigger the callbacks that were set using that instance, not any set through the jQuery instance of your main page.

You could instead call dispatchEvent() passing in your own event object

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

Or can instead use window.onMessage / window.postMessage or Broadcast Channel api with modern browsers

window.onMessage / window.postMessage, check browser support

//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, check browser support

//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');

Upvotes: 18

Sudhir Kumar
Sudhir Kumar

Reputation: 24

Try parent.$('body').trigger('preview.compiled');

Upvotes: -2

Related Questions