给父级的 iframe 事件

Question

所以，我想在 iframe 中触发一个事件，例如：

$('body').trigger('my_event');

我想在包含 iframe 的主页上绑定此事件：

$('iframe').find('body').bind('my_event', function()
{
    console.log('My event !');
}

但这不起作用。但是，我可以将事件从 iframe 触发到父正文。所以我有（在我的 iframe 中）：

$(top).find('body').trigger('my_event');

在我的主页中：

$('body').bind('my_event', function()
{
    console.log('My event !');
}

这很好用。 为什么？

是的，我确实知道跨域策略。我的主页和 iframe 都来自同一个域。

谢谢！

Answer 1

这可能是因为在您引用 $('iframe').find('body') 时它尚未加载。

尝试使用委托绑定，类似这样：

$(document).on('my_event', 'iframe body', function(e){
     console.log('My event !');
});

查看更多信息：https://learn.jquery.com/events/event-delegation/

更新：

看起来父级不会从 iframe 捕获事件，除非它在其元素上显式触发。

例如在您的 iframe 中：

parent.$(parent.document).trigger("my_event");

在父级中：

$(document).on('my_event', function(e){
      console.log('My event !');
});