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

Question

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 1

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

Answer 2

I used something like that in one of my projects. I was trying to download a file, and show message after download finished. This kind of thing didn't work in my experience:

$('#myiframe').attr("src","http://example.com");
$('#myiframe').load(function() { /* do work on load */ });

Load event fires immediately after iframe is written in HTML not when iframe loads all of its contents. But this code worked:

$('#myiframe').load("http://example.com", function() { /* do work on load */ });

This code waited for my file to download then fired load event. I think this could work for you too.

Answer 3

I wanted to hide the waiting spinner div when the i frame content is fully loaded on IE, i tried literally every solution mentioned in Stackoverflow.Com, but with nothing worked as i wanted.

Then i had an idea, that when the i frame content is fully loaded, the $(Window ) load event might be fired. And that exactly what happened. So, i wrote this small script, and worked like magic:

$(window).load(function () {
         //alert("Done window ready ");
         var lblWait = document.getElementById("lblWait");
         if (lblWait != null ) {
             lblWait.style.visibility = "false";
             document.getElementById("divWait").style.display = "none";
         }
     });

Hope this helps.

Answer 4

How/where are you triggering the load of the iframe? If you check these solutions a pattern of:

$('#myiframe').attr('src', 'http://example.com');
$('#myiframe').load(function() { /* do work on load */ });

is reported to work.

Similar reported solutions:

jQuery .ready in a dynamically inserted iframe
Javascript callback when IFRAME is finished loading?

Edit:

Looks like Nick Spiers has the right answer, or at least it's part of your problem. Access issues on the iframe contents.

Answer 5

I used this code to make sure the iFrame (identified by it's ID) was loaded before running my function:

$("#twitter-widget").load(myFunction);