Recursively access iframes after they've loaded with jQuery

Question

I've looked at the related questions here but am having a slightly different problem.

I am rewriting anchors across nested iframes, sometimes 3 or 4 iframes deep.

I use .load( function(){} ) to wait for each to load before accessing the anchors. This works fine when only going one iframe deep, but fails after that.

Here is the code:

function retarget_links( content ) {

    content.find("a").attr("href","#") ;

    var frame = content.find("iframe") ;
    if ( frame.length ) {
        frame.load(function() {
            retarget_links( frame.contents() ) ;
        })
    }
}

retarget_links( $("body") ) ;

It finds all of the iframes recursively, but it will only perform the .load callback for the first one.

Any ideas why?

Thanks!

NOTE: All iframe documents are in the same exact domain – I can access all frames' contents via the console.

Answer 1

Hey, try this

var frame = content.find("iframe") ;
if ( frame.length ) {
    frame.each(function() {
        this.load(function() {
            widget.retarget_links( this.contents() ) ;
        })
    });
}

I've added a foreach loop and have used the this keyword to load the contents for each one

Answer 2

It looks like this is because the child iframes are already loaded by the time the onload event is written. Duh.