Создание script до тех пор, пока iframe не загрузится до запуска

На сайте, над которым я работаю, есть плагин Live Chat для iframe. Я пытаюсь изменить изображение, если нет доступных агентов. Мой код работает на консоли, но ничего на сайте.

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

Я попробовал это:

$('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">');
    }
});

И это:

$(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">');
   }
});

Но ни один не работал

Ответ 1

Лучшим решением является определение функции в вашем родителе, например function iframeLoaded(){...}, а затем в использовании iframe:

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

работает кросс-браузер.

Если вы не можете изменить код в iframe, лучшим решением будет присоединение события load к 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
});

Ответ 2

Другой способ привязки к событию загрузки iframe - присоединить прослушиватель нагрузки к iframe перед добавлением тега src в iframe.

Вот простой пример. Это также будет работать с iframe, которые вы не контролируете.

http://jsfiddle.net/V42ts/

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

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

Ответ 3

Нашли это на веб-сайте Elijah Manor, который работает очень хорошо

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>