向iframe添加事件监听器

Question

如何向 iframe 中添加事件监听器？我尝试了以下代码，但好像不起作用：

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

我也尝试通过使用JavaScript框架，按id获取元素并添加监听器，像这样：

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

我可以在 iframe 中调用函数，因此我认为安全不是问题。有什么想法吗？

- Ronald

---

“afterLayout”事件究竟是由什么触发的？ - kangax

Answer 1

我从未尝试过处理“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');
                });
};

希望这会有所帮助。

- Mushegh A.

---

这个对我没用！在我的控制台上什么也没有打印出来！:/ - J86

Answer 2

如果您在Ext中进行严谨的iframe工作，您应该了解ManagedIFrame用户扩展：http://www.extjs.com/forum/showthread.php?t=40961。它具有内置事件和跨框架消息传递功能，以及许多其他好处。

- Brian Moeskau

Answer 3

失败的原因可能是：

1. iframe指向的URL与容器不同源，因此代码受到跨域脚本阻止。
2. 代码在框架内容加载之前运行

- AnthonyWJones

---

1. 同域名。
2. 在 onReady 事件中尝试附加，因此框架内容应准备就绪。刚刚意识到我已成功地将事件侦听器附加到了 iframe 的加载上，所以现在我真的不确定为什么 'afterLayout' 没有起作用。也许这是一个框架问题。

- Ronald

我认为“load”是你可以早期监听的少数事件之一 - 几乎是根据定义，因为如果没有提前附加“load”侦听器，你无法正确地等待加载完成！我发现，如果你通过编程方式编写iframe内容（例如通过srcdoc），你必须始终等待“load”事件（或jQuery load()）才能使其他事件侦听器正常工作。 - peterflynn