Question

是否可以向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中调用函数，所以我认为安全性不是问题。有任何想法吗？

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

希望它会有所帮助。

Answer 2

如果你在Ext中做了严肃的iframe工作，你应该查看ManagedIFrame用户扩展：

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

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

Answer 3

失败的原因可能是： -

将iframe作为容器从不同的域定向到的URL，因此跨域脚本阻止阻止了代码。
代码在加载帧内容之前运行

将事件侦听器添加到iframe

3 个答案: