Rilevamento carico contenuto iframe di dominio incrociato

Question

Ho un problema piuttosto interessante. Ho una pagina madre che creerà una finestra di dialogo jQuery modale con un iframe contenuto all'interno della finestra di dialogo. L'iframe verrà popolato con i contenuti di un dominio di terze parti. Il mio problema è che ho bisogno di creare un javascript a livello di finestra di dialogo in grado di rilevare se il contenuto dell'iframe è stato caricato correttamente e se non si è verificato entro 5 secondi, quindi chiudere la finestra di dialogo e riportare l'utente alla pagina padre.

Ho ricercato numerose soluzioni e solo due hanno un valore reale.

1. Ottieni il sito remoto per includere una riga javascript di document.domain = 'our-domain.com'.
2. Utilizzare un frammento di URL, ma avrei di nuovo bisogno della richiesta che il sito remoto sia in grado di modificare l'URL aggiungendo '#some_value' alla fine dell'URL e la mia finestra di dialogo dovrebbe eseguire il polling dell'URL fino a o lo vede o scade.

Sono onestamente le uniche opzioni con cui devo lavorare? Non c'è un modo più semplice per rilevare questo?

Ho cercato se c'è un modo per interrogare gli errori di risposta http, ma questo rimane ancora confinato alle stesse restrizioni.

Qualsiasi aiuto sarebbe immensamente apprezzato.

Grazie

Answer 1

Il modo più semplice (se è possibile ottenere il codice aggiunto ai siti esterni) è di aggiungere un iframe invisibile che punta a uno speciale file html sul proprio dominio.Questo potrebbe quindi utilizzare parent.parent.foo() per notificare alla finestra originale l'evento di caricamento.

L'ascolto dell'evento "load" ti dirà solo se la finestra è stata caricata, non cosa è stato caricato o se il documento è pronto per l'interazione.

Answer 2

Si potrebbe provare a utilizzare postMessage per la comunicazione tra i fotogrammi.
Ciò richiederà al sito remoto di includere alcuni JavaScript specifici per inviare un messaggio al documento principale al termine del caricamento.

Answer 3

Nicholas Zakas ha un articolo su come rilevare se un iframe è stato caricato: http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/. In pratica si dispone di questo frammento di codice:

var iframe = document.createElement("iframe"); 
iframe.src = "simpleinner.htm"; 

if (iframe.attachEvent){ 
    iframe.attachEvent("onload", function(){ 
     alert("Local iframe is now loaded."); 
    }); 
} else { 
    iframe.onload = function(){ 
     alert("Local iframe is now loaded."); 
    }; 
} 

document.body.appendChild(iframe); 

non ho ancora testato, ma sono abbastanza sicuro che jQuery dovrebbe essere in grado di gestire la cosa facendo qualcosa di simile $("#iframe").load(function() { alert("Local iframe is now loaded."); });

Answer 4

In ogni caso sarà necessario un po ' una sorta di collaborazione dal server dell'altro dominio, poiché si sta tentando di abusare del Same Origin Policy (SOP)

La prima soluzione document.domain=... non funzionerà se i domini sono diversi. Funziona solo per sottodomini e porte, come descritto nel link sopra.

L'unica opzione che consente la comunicazione tra domini senza polling è JSONP o di script con una richiamata della funzione JS. Questo metodo è disponibile in tutte le API di Google e funziona bene.

Abbiamo spiegato su our blog un modo per sandbox quelle chiamate in un iframe per proteggerli. Mentre postMessage è migliore ora, il window.name hack ha il vantaggio di lavorare sui vecchi browser.

Ironia della sorte, SOP non impedisce di inviare qualsiasi cosa a un altro dominio. Ma non sarai in grado di leggere la risposta.

Answer 5

È possibile farlo con un gestore di carico sull'iframe stesso. Sfortunatamente (sorpresa!) IE lo rende difficile. L'unico modo per farlo funzionare era comporre HTML per l'iframe, quindi aggiungerlo al documento con innerHTML. Quindi devo sondare per vedere quando l'iframe appare nel DOM, che varia a seconda che la pagina si sta caricando. Ecco un link alla fonte: http://svn.openlaszlo.org/openlaszlo/trunk/lps/includes/source/iframemanager.js

Vedere create(), __finishCreate() e gotload(). Sentiti libero di prenderne una copia e usarla tu stesso!

saluti, Max Carlson OpenLaszlo.org