javascript - 父级的 iframe 事件

Question

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

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

我想在包含 iframe 的主页上绑定(bind)此事件:

$('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') 时它尚未加载。

尝试使用委托(delegate)绑定(bind)，像这样:

$(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 !');
});