Impossibile sostituire onreadystate per caricare

Question

Stavo nascondendo l'icona di caricamento quando il mio file ha terminato il download in un iframe. Funzionava bene in Internet Explorer. In Chrome non sono riuscito a farlo attendere fino al caricamento del file nello iframe.

Qualsiasi aiuto è apprezzato.

function checkIframeLoaded() { 
    var iFrameObject = document.getElementById("iframehidden"); 
    var iframeDoc = iFrameObject.contentDocument || iFrameObject.contentWindow.document; 
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == "interactive" || iframeDoc.readyState == "loaded") { 
     if (top.document.getElementById("tblPleaseWait") != null) { 
      top.document.getElementById("tblPleaseWait").style.display = "none"; 
     } 
     else if (document.getElementById("tblPleaseWait") != null) { 
      document.getElementById("tblPleaseWait").style.display = "none"; 
     } 
     return; 
    } 
} 

function setupLoader(objIFrame, brestorepane) { 
    if (objIFrame.attachEvent) { 
     if (brestorepane) { 
      objIFrame.attachEvent('onreadystatechange', checkIframeLoaded); 
     } 

    } else { 
     if (brestorepane) { 
      objIFrame.addEventListener('load', checkIframeLoaded()); 
     } 
    } 
} 

Answer 1

Stai configurando il gestore in modo errato nei browser non IE.

In primo luogo, c'è un errore di battitura. addEventListner dovrebbe essere addEventListener. Il tuo JavaScript console potrebbe averlo menzionato.

Dopo di che, si è chiamandocheckIframeLoaded() immediatamente, invece di riferimento come un gestore.

Prova:

objIFrame.addEventListener('load', checkIframeLoaded); 

Answer 2

Se le iframe src punti a contenuti sul proprio sito e hai correttamente impostato allow-same-origin quindi è possibile utilizzare questo metodo (si contrassegnati domanda con jQuery, quindi questa soluzione utilizza jQuery, ma puro JS alternativa è anche possibile)

function checkIframeLoaded() { 
 
    if (top.document.getElementById("tblPleaseWait") != null) { 
 
    top.document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } else if (document.getElementById("tblPleaseWait") != null) { 
 
    document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } 
 
} 
 
$("#iframehidden").on("load", checkIframeLoaded);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='tblPleaseWait'>PLEASE WAIT</div> 
 
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>

Un altro modo si può fare questo è quello di mettere il codice nel documento iframe in sé (come ad esempio iframe.html):

$(window).on("load", function() 
{ 
    var plsWait = top.document.getElementById("tblPleaseWait"); 
    if(plsWait) plsWait.style.display = "none"; 
}); 

Se il iframe src è sul posto di qualcun altro - allora sei nei guai. A meno che il contenuto remoto non sia stato impostato per consentire lo scripting cross-site.

Inoltre, come Paul Roub sottolineato, si dispone di un errore qui:

objIFrame.addEventListener('load', checkIframeLoaded());

non sono in realtà delegare la funzione di checkIframeLoaded all'evento load; stai eseguendo quella funzione con la parentesi () e delegando invece il risultato, ovvero undefined.

è sufficiente rimuovere la parentesi per ottenere l'effetto desiderato, che è quella checkIframeLoaded sarà chiamato quando l'evento load viene attivato:

objIFrame.addEventListener('load', checkIframeLoaded);

Dopo di che è solo bisogno di lavorare entro i limiti di scripting attraverso telai.

Answer 3

function checkIframeLoaded() { 
 
    if (top.document.getElementById("tblPleaseWait") != null) { 
 
    top.document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } else if (document.getElementById("tblPleaseWait") != null) { 
 
    document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } 
 
} 
 
$("#iframehidden").on("load", checkIframeLoaded);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='tblPleaseWait'>PLEASE WAIT</div> 
 
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>