將事件偵聽器添加到iframe

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

失敗的原因可能是： -

1. iframe作為容器從不同域引導到的URL，因此跨域腳本阻止阻止了代碼。
2. 代碼在加載幀內容之前運行