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

或者可以使用现代浏览器{/ 3}}或window.onMessage / window.postMessage

window.onMessage / window.postMessage，Broadcast Channel api

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

Answer 2

尝试使用。$（＆＃39; body＆＃39;）。触发器（＆＃39; preview.compiled＆＃39;）;

收听iFrame中的事件

2 个答案: