how to check if a same domain, dynamically loaded iframe which i have no control over is 100% loaded?

Question

Photo sets in Tumblr are served up as iFrames.

I want to manipulate that iframe via jQuery to look the way i want it too, which I'm able to do, but it doesn't always finish what it's doing.

I think it's because there is a lot of things happening concurrently as the page loads. I need a way to check that this iFrame, which I have no control over, loads 100% before i do the fun stuff.

There are various techniques suggested in other questions about this, but I don't think they are right for this situation. Here's one example from the Stack Overflow question "jQuery .ready in a dynamically inserted iframe"

function callIframe(url, callback) {
    $(document.body).append('<IFRAME id="myId" ...>');
    $('iframe#myId').attr('src', url);

    $('iframe#myId').load(function() 
    {
        callback(this);
    });
}

But that makes no sense to me whatsoever to me, even though it got ticked and had 100 upvotes. In this 'answer' the iframe is being appended by the function. That to me is not a dynamically loaded iframe!

Here is my code with the 'dumb' iframe load checker. The code works, but only sometimes. You can see it in action here http://syndex.me (third post is a photoset)

$(".post_relative").each(function () {
        var post_relative = $(this);
        var photoset = post_relative.find('.html_photoset');
        if(photoset.length){
            var myFrame = photoset.find("iframe");
            myFrame.load(function(){
                var newCover=myFrame.contents().find('.photoset').children(':first-child').children(':first-child').attr("href")+ '?'+(Math.random()*10000);
                post_relative.append("<img src='"+ newCover +"' alt='Cover Page' />");
                var psHeight = post_relative.find('img');
                psHeight.load(function(){
                if (psHeight.height()>heightRef){
                    psHeight.height(heightRef);
            }
                myFrame.hide();
            })
        })
        }
    });

So the question is: How do you execute a script based on the 100% loading and readiness of an iframe?

score 1 · Answer 1 · answered Dec 10 '11 at 21:31

1

You have write data outside the context of each frame using the onload event. You have two options:

cookies
localStorage

The second is a vastly superior solution, but it is not supported on IE7. If it is in the same schema, domain, and port then you can access these items from both frames.

answered Dec 10 '11 at 21:31

austincheney

1,097
7
8

I'm don't need to bother with ie7 users. Care to elaborate on how that implements in this situation? It's quite an abstract answer! I'll try google around in the meantime. – RGBK Dec 10 '11 at 22:21
To the iframe window add something like this to the body tag: onload="localStorage.setItem('frameload', window.location.href)"; Then write some logic in the core window to look for that item using localStorage.getItem("frameload"); – austincheney Dec 11 '11 at 03:46
This is a great answer. I had messed around with setting document.domain to achieve this, but your solution is much cleaner and less hacky. – NolanDC Jun 12 '12 at 17:25

score -1 · Answer 2 · answered Dec 10 '11 at 21:33

-1

If your using jquery have you tried

$("#iFrameId").load(function (){
    // do something once the iframe is loaded
});

answered Dec 10 '11 at 21:33

Dominic Green

10,142
4
30
34

how to check if a same domain, dynamically loaded iframe which i have no control over is 100% loaded?

2 Answers2