Listen to events inside iFrame

Question

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?

Answer 1

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