Ajax request: Wait till iframe fully loaded or prevent affecting ajax success animations

Question

I am currently testing around with ajax and pushstate. I am quite still a beginner with that topic. Regarding my question here I got it with help nicely running and everything works smooth.

But when I embed for example a video from vimeo with an iframe in my #content like this:

<iframe class="video" src="http://player.vimeo.com/video/video-id" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

..the ajax does fire before the iframe is even loaded.

This would still be fine if the iframe still has to load after the call but even after the iframe loading has finished it will affect my next ajax call with buggy transitions. As you see in my code I perform two actions after ajax has finished and they just won't work properly if I have an iframe embedded in my #content.

So my questions are:

a.) Is there a way to make sure all elements (even from third party) have loaded completely before the ajax success fires?

b.) How could I prevent that an (even loaded) iframe affects my further ajax calls and animations?

Here is my final ajax code I use right now:

$(function(){
    var replacePage = function(url) {

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();

                $("#content").promise().done(function(){                            
                    $('#content').html(html).fadeIn().promise().done(function(){    
                        $(".menue").slideUp();
                    });
                }); 
            }
        });
    }

    $('nav a').on('click', function(e){
        history.pushState(null, null, this.href);       
        replacePage(this.href);
        e.preventDefault();
        $("#content").hide();
        // maybe tell here to "stop all iframe communication" ?
    });


    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

I was already been told, that this depends on how the iframe connects to it's source. I guess handling this with API (which I still have to learn) would guaranty that it will work proberly. But in this case I'm talking about a simple embed code where the third party sometimes not even offer an API. So at least telling the iframe "load whenever you want after the ajax call, but please just stop any communication when a new ajax call is requested so that you won't trouble the success animations from the new call" would be a solution?

score 0 · Answer 1 · answered Oct 02 '12 at 18:52

You could use javascript to add the iframe to the DOM, and then bind your ajax stuff:

$(function(){
    var iframe = '<iframe class="video" src="http://player.vimeo.com/video/video-id" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
    $("body").append(iframe, function(){
        //stuff to do after the iframe has loaded
    });
});

Ajax request: Wait till iframe fully loaded or prevent affecting ajax success animations

1 Answers1