Making script wait until iframe has loaded before running

Question

The site I'm working on has a Live Chat plugin on an iframe. I'm trying to change an image if there are no agents available. My code works on the console, but nothing on the site.

var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
if (LiveChatStatus =="Offline"){
    $('#liveChat').html('<img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png">');
}

I tried this:

$('iframe').ready(function(){
    var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
    if (LiveChatStatus =="Offline"){
        $('#liveChat').html('<img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png">');
    }
});

And this:

$(document).ready(function(){
   var LiveChatStatus = $("iframe").contents().find(".agentStatus").html();
   if (LiveChatStatus =="Offline"){
       $('#liveChat').html('<img src="%%GLOBAL_ShopPath%%/product_images/theme_images/liveoffline.png">');
   }
});

But neither worked

Yotam Omer · Accepted Answer · 2017-06-23T06:27:14.340

36

The best solution is to define a function in your parent such as function iframeLoaded(){...} and then in the iframe use:

$(function(){
    parent.iframeLoaded();
})

this works cross-browser.

If you cannot change the code within the iframe, your best solution will be to attach the load event to the iframe..

$(function(){
    $('iframe').on('load', function(){some code here...}); //attach the load event listener before adding the src of the iframe to prevent from the handler to miss the event..
    $('iframe').attr('src','http://www.iframe-source.com/'); //add iframe src
});

edited Jun 23 '17 at 06:27

answered Jul 02 '13 at 22:38

Yotam Omer

15,310
11
62
65

2

Suggest `$('iframe').on('load', function(){some code here...});` At some point in the history of jQuery, $element.load() stopped working like this. – Bob Stein Jun 02 '17 at 15:53
@BobStein-VisiBone haha true. I updated my answer from 4 years ago. Thanks :) – Yotam Omer Jun 23 '17 at 06:27

score 9 · Answer 2 · answered Jul 02 '13 at 22:54

Another way to bind to the load event of an iframe is to attach a load listener to the iframe before adding a src tag to the iframe.

Here's a simple example. This will also work with iframes that you don't control.

http://jsfiddle.net/V42ts/

// First add the listener.
$("#frame").load(function(){
    alert("loaded!");
});

// Then add the src
$("#frame").attr({
    src:"https://apple.com"
})

score 2 · Answer 3 · answered Dec 01 '16 at 21:18

Found this from Elijah Manor's website which works very well

function iFrameLoaded(id, src) {
    var deferred = $.Deferred(),
        iframe = $("<iframe class='hiddenFrame'></iframe>").attr({
            "id": id,
            "src": src
        });

    iframe.load(deferred.resolve);
    iframe.appendTo("body");

    deferred.done(function() {
        console.log("iframe loaded: " + id);
    });

    return deferred.promise();
}

$.when(iFrameLoaded("jQuery", "http://jquery.com"), iFrameLoaded("appendTo", "http://appendto.com")).then(function() {
    console.log("Both iframes loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Making script wait until iframe has loaded before running

3 Answers3

Linked