CODEWITHSUNDEEP
javascriptjqueryiframeonload
matfr
matfr

Reputation: 109

Jquery $(window).load not working as expected when in script referenced from inside an iframe

I have a page with an iframe. I am trying to load animations into this iframe. Each piece of content is an html page with references to javascript/jquery scripts that do soem sort of animation. For example:

content.html

<head>
<link rel="stylesheet" type="text/css" href="css/slide.css">
<script src="js/library/big_slide_img.js"></script>
</head>
<body>
    <img class="big_slide_img" src="http://25.media.tumblr.com/0ab6f805c5a3591168e2fe2133552054/tumblr_mk52iuvbNI1s631nvo1_1280.jpg">
</body>

big_slide_img.js

$(window).load(function()
{
    $("#iframe").contents().find('.big_slide_img').animate({left: '-=521'}, 800,function(){});
});

How it is loaded

loadSlide = function(slide_no)
    {
        $.ajax(
        {
            url: "http://myurl.com",
            async: false,
            jsonpCallback: 'jsonCallback',
            contentType: "application/json",
            type: "GET",
            dataType: "jsonp",
            data: {"action": "loadall"},
            success: function(data)
            {
                $('#frame_title').html(data.title);
                $('#text').html(data.text);
                $('#iframe').contents().find('html').html(data.animation); 
            },
            error: function (event, jqXHR, ajaxSettings, thrownError)
            {
                alert('[event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
            }
        });
    };

My Problem

The animations are inconsistent and I suspect that it is due to the $(window).load not waiting as it should. A delay rectifies all my problems:

$(window).load(function()
{
    $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){});
});

How do I achieve this without the delay? As I don't know what code will be in these files, I would like to avoid having to monitor the iframe externally and call a specific function when it is done. I am hoping/assuming, that I am just not referencing something right.

Many thanks.

Upvotes: 0

Views: 551

Answers (2)

matfr
matfr

Reputation: 109

I realised based on VictorVRS's comment above, and my response, that I needed to get the load function of the iframe to fire (I think only the external page's was). My ajax call now return a url as opposed to the actual data and that is set into the src of the iframe, loading a page. This became:

$('#iframe').contents().find('html').html(data.animation);

this:

$('iframe').attr('src',data.animation_url);

Upvotes: 0

VitorVRS
VitorVRS

Reputation: 11

jQuery does not call "load" trigger because the page that instantiated jQuery is already loaded.

You can load jquery inside iframe and put this code in "big_slide_img.js": $(function(){ $("#iframe").contents().find('.big_slide_img').delay(800).animate({left: '521'}, 800,function(){}); });

Or you may create an trigger outside of iframe, e call it when iframe was loaded.

Have many other ways.

Upvotes: 1

Related Questions