Jquery ('#iframeid').load() is executed before Iframe CONTENT (text, images) are loaded

Abhischek picture Abhischek · Aug 11, 2011 · Viewed 12.5k times · Source

I'm trying to access data of an Iframe's Iframe. To force my javascript function to wait I use jqueries .load function. But still my javascript code get's executed "sometimes" before the iframe's content is fully loaded. By sometimes I mean that the behavior is different for different computers. On slower computers it waits most times for fasters computers the code gets almost always executed. So I suspect that Internet explorer 8 fires the onload event to early. Is there any jquery function to wait until all elements of an iframe are loaded?

This is my code:

function parsePeopleLink(){
try{
    //This is where I check if the wanted I frame already exists
    if(document.getElementById('isolatedWorkArea') != null) {
        if(window.frames[2] != null) {
            if(window.frames[2].name == 'isolatedWorkArea') {
                //This is where I want the following code only to be executed when the Iframe's content is fully loaded, otherwise I get an access denied error when trying to change Userlinks
                $('#isolatedWorkArea').load(function() {
                    for( var i = 0; i < window.frames.length; i++){
                        for(var j = 0; j< window.frames[i].document.frames.length; j++){
                            IframeDocument = window.frames[i].document.frames[j].document;
                            changeUserLink(findPeopleIDfix(findPeopleID(IframeDocument)),findUserLinks(IframeDocument),8, IframeDocument);
                        }
                    }
                });
            }
            else {
                throw e; //I know that all the nested else statements are ugly, I just inserted them for testing purposes
            }   
        }
        else {
            throw e;
        }
    }
    else {
        throw e;
    }
}
catch(e) {
    //alert(e.description);
    for(var k = 0; k < window.frames.length; k++)
    {
        IframeDocument = window.frames[k].document;
        changeUserLink(findPeopleIDfix(findPeopleID(IframeDocument)),findUserLinks(IframeDocument),9, IframeDocument);      
        iframeindex++;
    }
  }
}

All Iframes have: same port, protocoll, and src. Help is much appreciated

Answer

Nick Spiers picture Nick Spiers · Aug 11, 2011

Javascript can't access external content to monitor when it's completely loaded. If you have access to the iframe content you can add a call to the parent window's function to trigger it.

Parent Page:

function parsePeopleLink() {
    //all your current code like you have it now
}

Framed Page:

$(function(){
    parent.parsePeopleLink();
    //This will monitor the document being ready in the framed page 
    //and then trigger the parent's function
});