Come verificare se iframe è caricato o ha un contenuto?

Ho un iframe con id = “myIframe” e qui il mio codice per caricare il suo contenuto:

$('#myIframe').attr("src", "my_url"); 

A volte il problema richiede troppo tempo per il caricamento e talvolta viene caricato molto rapidamente. Quindi devo usare la funzione “setTimeout”:

 setTimeout(function(){ if (//something shows iframe is loaded or has content) { //my code } else { $('#myIframe').attr("src",""); //stop loading content } },5000); 

Tutto quello che voglio sapere è come scoprire se un iFrame è caricato o ha contenuti. Usando iframe.contents().find() non funzionerà. Non riesco a utilizzare iframe.load(function(){}) .

Prova questo.

   

usare gentilmente:

 $('#myIframe').on('load', function(){ //your code (will be called once iframe is done loading) }); 

Aggiornato la mia risposta quando gli standard sono cambiati.

L’opzione più semplice:

   

Ho avuto lo stesso problema e aggiunto a questo, ho bisogno di verificare se iframe viene caricato indipendentemente dalla politica dei domini. Stavo sviluppando un’estensione per Chrome che inietta determinati script su una pagina Web e visualizza alcuni contenuti dalla pagina padre in un iframe. Ho provato il seguente approccio e questo ha funzionato perfettamente per me.
PS: Nel mio caso, ho il controllo sul contenuto in iframe ma non sul sito principale. (Iframe è ospitato sul mio server)

Primo:
Crea un iframe con un attributo data-like in esso (questa parte era in script iniettato nel mio caso)

Ora nel codice iframe, usa:

 var sourceURL = document.referrer; window.parent.postMessage('1',sourceURL); 

Ora torna allo script immesso come nel mio caso:

 setTimeout(function(){ var myIframe = document.getElementById('myiframe'); var isLoaded = myIframe.prop('data-isloaded'); if(isLoaded != '1') { console.log('iframe failed to load'); } else { console.log('iframe loaded'); } },3000); 

e,

 window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons { console.log('URL issues'); return; } else { var myMsg = event.data; if(myMsg == '1'){ $("#myiframe").prop('data-isload', '1'); } } } 

Potrebbe non rispondere esattamente alla domanda, ma è effettivamente un ansible caso di questa domanda che ho risolto con questo metodo.

Non sono sicuro che tu possa rilevare se è caricato o meno, ma puoi triggersre un evento una volta completato il caricamento:

 $(function(){ $('#myIframe').ready(function(){ //your code (will be called once iframe is done loading) }); }); 

EDIT: Come sottolineato da Jesse Hallett, questo sparerà sempre quando l’ iframe è caricato, anche se lo ha già fatto. Quindi, in sostanza, se l’ iframe è già stato caricato, il callback verrà eseguito immediatamente.

È ansible utilizzare l’evento di load dell’iframe per rispondere quando viene caricato l’iframe.

 document.querySelector('iframe').onload = function(){ console.log('iframe loaded'); }; 

Questo non ti dirà se il contenuto corretto è stato caricato: per verificarlo, puoi controllare il contentDocument .

 document.querySelector('iframe').onload = function(){ var iframeBody = this.contentDocument.body; console.log('iframe loaded, body is: ', body); }; 

Il controllo di contentDocument non funzionerà se l’iframe src punta a un dominio diverso da quello in cui è in esecuzione il codice.

Quando viene caricato un iFrame, inizialmente contiene il documento #, quindi controllare che lo stato di caricamento funzioni meglio controllando cosa c’è ora ..

 if ($('iframe').contents().find('body').children().length > 0) { // is loaded } else { // is not loaded } 

nel mio caso si trattava di una cornice di origine incrociata e talvolta non veniva caricata. la soluzione che ha funzionato per me è: se è stata caricata correttamente, se provi questo codice:

 var iframe = document.getElementsByTagName('iframe')[0]; console.log(iframe.contentDocument); 

non ti permetterà di accedere a contentDocument e lanciare un errore di origine incrociata, tuttavia se il frame non è stato caricato correttamente, contentDocument restituirà un object #document

Un ottimo metodo è usare jQuery AJAX. Il frame principale sarebbe simile a questo:

  

Il file iframe_load.php carica la libreria jQuery e un JavaScript che tenta di caricare l’URL di destinazione in un AJAX GET:

 var the_url_to_load = "http://www.your-website.com" ; $.ajax({ type: "GET", url: the_url_to_load, data: "", success: function(data){ // if can load inside iframe, load the URL location.href = the_url_to_load ; }, statusCode: { 500: function() { alert( 'site has errors' ) ; } }, error:function (xhr, ajaxOptions, thrownError){ // if x-frame-options, site is down or web server is down alert( 'URL did not load due to x-frame-options' ) ; } }); 

IMPORTANTE La destinazione deve contenere l’intestazione “Access-Control-Allow-Origin”. Esempio in PHP:

 HEADER( "Access-Control-Allow-Origin: *" ) ;