向 iframe 添加事件侦听器答案

【问题标题】：Adding an event listener to an iframe向 iframe 添加事件侦听器
【发布时间】：2010-11-26 12:39:04
【问题描述】：

是否可以向 iframe 添加事件侦听器？我已经尝试过这段代码，但它似乎不起作用：

document.getElementsByTagName('iframe')[0].contentWindow.window.document.body.addEventListener('afterLayout', function(){
                console.log('works');
            });

我也刚刚尝试使用通过 id 获取元素并通过我正在使用的 JavaScript 框架添加我的侦听器，如下所示：

Ext.fly("iframeID").addListener('afterLayout', function(){ alert('test'); });

我可以在 iframe 中调用函数，所以我认为安全性不是问题。有任何想法吗？

【问题讨论】：

究竟是什么触发了“afterLayout”事件？

标签： javascript dom iframe extjs

【解决方案1】：

失败的原因可能是：-

iframe 从与容器不同的域定向到的 URL，因此跨域脚本阻止会阻止代码。
代码在框架内容加载之前运行

【讨论】：

1) 相同的域。 2) 尝试在 onReady 事件中附加，因此框架内容应该已准备好。刚刚意识到我成功地将一个事件侦听器附加到 iframe，所以现在我真的不确定为什么“afterLayout”不起作用。可能是框架问题。
我认为“加载”是您可以尽早侦听的少数事件之一 - 几乎按照定义，因为如果不提前附加“加载”侦听器，您将无法正确等待加载完成！我发现如果您以编程方式编写 iframe 内容（例如通过srcdoc），您总是必须等待“加载”事件（或 jQuery load()），然后才能附加其他事件侦听器。

【解决方案2】：

如果您在 Ext 中进行认真的 iframe 工作，您应该查看 ManagedIFrame 用户扩展：

http://www.extjs.com/forum/showthread.php?t=40961

它具有内置事件和跨框架消息传递，以及许多其他好处。

【讨论】：

【解决方案3】：

我从未尝试过处理“afterLayout”事件，但为了获得更多与浏览器兼容的代码您将使用 (iframe.contentWindow || iframe.contentDocument) 而不是 iframe.contentWindow。

尝试类似的东西

var iframe = document.getElementsByTagName('iframe')[0],
    iDoc = iframe.contentWindow     // sometimes glamorous naming of variable
        || iframe.contentDocument;  // makes your code working :)
if (iDoc.document) {
    iDoc = iDoc.document;
    iDoc.body.addEventListener('afterLayout', function(){
                        console.log('works');
                });
};

希望对你有所帮助。

【讨论】：

这对我不起作用！在我的控制台中什么都没有打印出来！ ://