收听iFrame中的事件

Question

所以我有一个主页面(a)和一个预览页面(b)通过iframe嵌入主页面.页面(b)触发特殊事件:

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

现在我希望主页面(a)收听此事件并执行以下操作:

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

但是,上面的代码不起作用.有任何想法吗？

Answer 1

jQuery trigger()仅触发通过.on()其自己的实例添加的回调。因此，iframe中的jQuery只会触发使用该实例设置的回调，而不会触发通过主页的jQuery实例设置的任何回调。

您可以调用dispatchEvent()自己的事件对象传递

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

或者可以在现代浏览器中使用window.onMessage / window.postMessage或Broadcast Channel API

window.onMessage / window.postMessage，检查浏览器支持

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

广播频道API onMessage / postMessage，检查浏览器支持

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