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中捕获一个事件，除非它明确地在其元素上触发。

E.g。在你的iframe中：

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

在父母：

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