Adding an event listener to an iframe

Question

Is it possible to add an event listener to an iframe? I've tried this code, but it doesn't seem to work:

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

I've also just tried using getting the element by id and adding my listener via the JavaScript framework I'm using, like this:

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

I can call functions in the iframe, so I don't think security is an issue. Any ideas?

Answer 1

Reasons for failure could be:-

1. The URL to which the iframe is directed from a different domain as the container, hence code is prevented by cross-domain script blocking.
2. The code is running before the frame content is loaded

Answer 2

I never tried to handle 'afterLayout' event but for more browser compatible code you'll use (iframe.contentWindow || iframe.contentDocument) instead of iframe.contentWindow .

try something like

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

Hope it'll help.

Answer 3

If you are doing serious iframe work in Ext, you should look into the ManagedIFrame user extension:

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

It features built-in events and cross-frame messaging, as well as many other benefits.