Rendere lo script in attesa che l'iframe sia caricato prima dell'esecuzione

Question

Il sito su cui sto lavorando ha un plugin per la chat in diretta su un iframe. Sto cercando di cambiare un'immagine se non ci sono agenti disponibili. Il mio codice funziona sulla console, ma nulla sul sito.

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

ho provato questo:

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

E questo:

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

Ma né lavorato

Answer 1

La soluzione migliore è quella di definire una funzione nel vostro padre, ad esempio function iframeLoaded(){...} e quindi nell'uso iframe:

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

funziona cross-browser.

Se non è possibile modificare il codice all'interno del iframe, la soluzione migliore sarà quella di collegare l'evento load al 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

Un altro modo per legare l'evento carico di un iframe è di allegare un ascoltatore del carico sull'iframe prima di aggiungere un tag src all'iframe.

Ecco un semplice esempio. Funzionerà anche con iframe che non controlli.

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

trovato questo dal sito di Elia Manor che funziona molto bene

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>