Tworzenie skryptu do momentu załadowania elementu iframe przed uruchomieniem

Question

Witryna, nad którą pracuję, ma wtyczkę Live Chat na elemencie iframe. Próbuję zmienić obraz, jeśli nie ma dostępnych agentów. Mój kod działa na konsoli, ale nic na tej stronie.

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

Próbowałem to:

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

I tak:

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

Ale nie pracował

Answer 1

Najlepszym rozwiązaniem jest zdefiniowanie funkcji w swoim rodzicem takiego jak function iframeLoaded(){...} i następnie użyj iframe:

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

działa to w różnych przeglądarkach.

Jeśli nie można zmienić kod w iframe, najlepszym rozwiązaniem będzie dołączyć zdarzenie load do 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 
}); 

Answer 2

Innym sposobem wiązać przypadku obciążenia iframe jest dołączenie nasłuchiwania obciążenia w elemencie iframe przed dodaniem znacznika src do elementu iframe.

Oto prosty przykład. Będzie to również działać w przypadku elementów iframe, których nie kontrolujesz.

http://jsfiddle.net/V42ts/

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

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

Answer 3

Znalazłem to na stronie internetowej Elijah Manor, który działa bardzo dobrze

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>