监听 iFrame 内的事件

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

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

现在我希望主页（a）监听这个事件并执行一些操作：

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

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

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

你可以打电话dispatchEvent()传入你自己的事件对象

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

或者可以改为使用window.onMessage / window.postMessage https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage or 广播频道 API https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API使用现代浏览器

窗口.onMessage / 窗口.postMessage,检查浏览器支持 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Browser_compatibility

//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,检查浏览器支持 https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API#Browser_compatibility

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