Rilevare quando il contenuto Iframe è stato caricato (Cross browser)

Sto cercando di rilevare quando un iframe e il suo contenuto sono stati caricati ma non hanno avuto molta fortuna. La mia applicazione prende un po ‘di input nei campi di testo nella finestra padre e aggiorna l’iframe per fornire una’ anteprima live ‘

Ho iniziato con il seguente codice (YUI) per rilevare quando si verifica l’evento di caricamento iframe.

$E.on('preview-pane', 'load', function(){ previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0]; } 

‘preview-pane’ è l’ID del mio iframe e sto usando YUI per colbind il gestore di eventi. Tuttavia, il tentativo di accedere al corpo nella mia callback (su caricamento iframe) non funziona, penso perché l’iframe viene caricato prima che il gestore eventi sia pronto. Questo codice funziona se ritarda il caricamento dell’iframe facendo in modo che lo script php che lo genera dorma.

Fondamentalmente, sto chiedendo qual è l’approccio corretto tra i vari browser per rilevare quando l’iframe è stato caricato e il suo documento è pronto?

rilevare quando l’iframe è stato caricato e il suo documento è pronto?

È l’ideale se puoi ottenere l’iframe per dirti da solo uno script all’interno del frame. Ad esempio, potrebbe chiamare direttamente una funzione genitore per dirgli che è pronta. L’assistenza è sempre necessaria con l’esecuzione di codice cross-frame poiché le cose possono accadere in un ordine che non ti aspetti. Un’altra alternativa è impostare ‘var isready = true;’ nel proprio ambito e avere lo sniff dello script genitore per “contentWindow.isready” (e aggiungere il gestore onload se non lo è).

Se per qualche motivo non è pratico cooperare con il documento iframe, hai il tradizionale problema di carico-corsa, ovvero che anche se gli elementi sono l’uno accanto all’altro:

   

non vi è alcuna garanzia che l’articolo non sia già stato caricato al momento dell’esecuzione dello script.

Le vie d’uscita dalle gare di carico sono:

  1. su IE, puoi usare la proprietà ‘readyState’ per vedere se qualcosa è già caricato;

  2. se l’elemento disponibile solo con JavaScript abilitato è accettabile, è ansible crearlo dynamicmente, impostando la funzione evento “onload” prima di impostare l’origine e l’aggiunta alla pagina. In questo caso non può essere caricato prima che sia impostata la richiamata;

  3. il modo old-school di includerlo nel markup:

I gestori in linea “onsomething” in HTML sono quasi sempre la cosa sbagliata e da evitare, ma in questo caso a volte è l’opzione meno valida.

Vedi questo post sul blog. Usa jQuery, ma dovrebbe aiutarti anche se non lo stai usando.

Fondamentalmente lo aggiungi al tuo document.ready()

 $('iframe').load(function() { RunAfterIFrameLoaded(); }); 

Per chi utilizza React, rilevare un evento di caricamento iframe della stessa origine è semplice come impostare il listener di eventi Load sull’elemento iframe.

Per chiunque usi Ember, questo dovrebbe funzionare come previsto: