Question

29

Making script wait until iframe has loaded before running

rated 0 times [ 33] [ 4] / answers: 1 / hits: 47265 / 11 Years ago, tue, july 2, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yamileth

Add To Favorites

Follow

Total Points: 53

Total Questions: 96

Total Answers: 112

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

answered 11 Years ago susanajamiep · Accepted Answer

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

});