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

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 开发者_JS百科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

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

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.

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.

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.