iframe窗口中的Jquery触发器自定义事件

时间:2014-02-11 18:16:56

标签: jquery javascript-events

我无法从父文档中触发iframe中的自定义事件。

在孩子我有这样的代码:

$(window).on( 'my-event', function() { console.log( "GOT IT" ) } )

在父母中,我获得iframe并尝试发送一个事件:

iframe = document.getElementById( 'content-frame' )
$(iframe.contentWindow).trigger( 'my-event' )

活动未到场。我尝试使用'文档'而不是窗口,但仍然没有运气。

这可以用jquery完成吗?

我希望有一种简单的方法,这样我就可以避免编写一个调度函数,父母在iframe中调用一个函数并调度该事件。

2 个答案:

答案 0 :(得分:17)

这是我的解决方案。在父级中,您可以使用以下命令触发事件:

$('#content-frame')[0].contentWindow.$('body').trigger('my-event');

在孩子中,你可以听取这个事件:

$('body').on('my-event', function(e) {
  alert("Hello, World! Message received!");
});

答案 1 :(得分:4)

只是对Pete的答案的补充(不需要jQuery)

var event = document.createEvent('CustomEvent');
event.initCustomEvent('my-event', true, true, null);
frames['iframeId'].document.dispatchEvent(event);

更详细的版本:

var event = document.createEvent('CustomEvent');
var canBubble = true;
var cancelable = true;
var eventdDetail = {};

event.initCustomEvent('myEvents:myCustomEvent', canBubble, cancelable, eventDetail);

frames['iframeId'].document.dispatchEvent(event);

eventDetail对象随后可用作事件处理程序的event.detail属性

然而,即使所有浏览器都支持,这是一种旧语法。 在现代浏览器中,建议使用CustomEvent()构造函数。