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

score 3 · Answer 1 · edited Dec 12 '12 at 12:28

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.

Nick Spiers · Accepted Answer · 2011-08-11T14:31:45.903

3

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

edited Aug 11 '11 at 14:31

answered Aug 11 '11 at 14:09

Nick Spiers

2,344
2
19
31

I'm not trying to load external content. Sry for the misunderstanding. The content inside the Iframe is UserId Links and Images, I want to change those links to a custom link I designed. My Main Javascript script is called by the parent page with $(document).ready(function(){}); This function (a parser) should then change all the links in the iframe to my custom links. I do not really have access to modify content of the iframe as it is rendered by the Iframe.. Could you explain your solution a bit more detailed? – Abhischek Aug 11 '11 at 14:14
The parent page would need to access the iframe content to determine when it's loaded which is not possible. The framed page has to trigger a function in the parent page that lets it know that it's loaded. Then you could trigger your parsePeopleLink function. About to edit my code above to show you what I mean. – Nick Spiers Aug 11 '11 at 14:30
the LOAD event on the iframe fire when content STARTS loading, not when it is complete. You need to run $(document).ready() from within the Iframe and call a function in the parent window. – Diodeus - James MacFarlane Aug 11 '11 at 14:30
Sorry, but how can I append the html of the Iframe before it's ready? When I try to access the iframe (attribute of iframe) I get "Access denied Error".. – Abhischek Aug 11 '11 at 15:05
Right, which is where the problem is. The only way you can do it is if you have access to the iframed page's source to be able to add that script. – Nick Spiers Aug 11 '11 at 15:11
Oh ok. But thanks anyway for your help. I will keep googling and edit my post if I find something. – Abhischek Aug 11 '11 at 15:16

score 1 · Answer 3 · answered Dec 10 '14 at 08:00

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.

score 0 · Answer 4 · edited May 23 '17 at 12:10

0

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.

edited May 23 '17 at 12:10

Community

1
1

answered Aug 11 '11 at 14:02

numbers1311407

33,686
9
90
92

Nope sry doesn't work. I still get Access denied error in Internet Explorer. And just btw: I thought I was using this function: [Jquery .load()](http://api.jquery.com/load-event/) – Abhischek Aug 11 '11 at 14:08
Right turns out there are two `load` methods, based on argument overloading. I'll add an edit concerning this. – numbers1311407 Aug 11 '11 at 14:10
Do you mean to re-set the src of the Iframe? To be honest I'm actually not loading the Iframe myself. It is loaded by a framework. So I'm not sure how setting the src of the iframe again will help me? – Abhischek Aug 11 '11 at 14:23
Yes that's just the pattern from the other question which was marked as working. It doesn't apply as well to your situation. – numbers1311407 Aug 11 '11 at 15:09
Oh I see now. I'm trying to attach the load event to the Iframe, but the problem I'm having now is that the iframe i need to change is the child of another iframe. So I can't use the iframe's id to access it.. Any suggestions? – Abhischek Aug 11 '11 at 15:14
Haha sorry man, not really. Iframes inside iframes, this is getting a bit hairy for me :-) – numbers1311407 Aug 11 '11 at 15:21

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

4 Answers4

Linked