2013-05-20 16 views
11

Come si può far dialogare due iFrame? Ad esempio, ero un valore di elemento al secondo iframe e il primo iframe ha l'elemento di visualizzazione su di esso. Devo ottenere il valore dal secondo frame al primo. Come lo farei? Non dire usare i cookie, perché farebbe male con una grande quantità di dati.Comunicazione tra iFrame?

+4

Prima di tutto, sono gli iframe sullo stesso dominio? Oppure sono di siti diversi? – BBog

+1

https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage – epascarello

+0

Sono lo stesso dominio. Quindi entrambi sono su http://www.example.com – Matthew

risposta

17

Se gli elementi vengono serviti dallo stesso dominio, possono accedere direttamente l'un l'altro. Per esempio, in iframe1 si potrebbe fare:

document.getElementById('someDiv').innerHTML = 
    top.document.getElementById('otherIframe').contentWindow. 
    document.getElementById('someOtherDiv').innerHTML; 
+0

Usando top si parte dal presupposto che questo codice non verrà mai caricato in un frame altrimenti non punterebbe a ciò che ci si aspetta. –

+0

@MattBerkowitz cosa intendi? se hai due iframe in una pagina e chiami 'top' da loro, ti dà la finestra di contenimento da cui puoi trovare l'altro iframe. – jbabey

+16

No, ti dà il massimo frame, che potrebbe essere il genitore o un nonno, ecc. Considera l'impostazione appena menzionata caricata in un altro iframe (non possiamo controllare chi potrebbe caricare la nostra pagina in un iframe), top restituire quella pagina più esterna che probabilmente non avrà un 'otherIframe' da trovare (e potrebbe anche non soddisfare i requisiti CORS). Usare 'parent' invece di' top' sarebbe probabilmente leggermente migliore in quanto garantisce che stai facendo quello che pensi di fare. –

5

Ti avverto in primo luogo fuori che avrete bisogno di piena capacità in codice di modifica per entrambi iframe. Gli iframe sono trattati con una rigorosa sicurezza; altrimenti, potrei creare un dominio "bunkofamerica.com", inserire "bankofamerica.com" in un iframe e quindi analizzare la password dell'utente mentre la digita. (Le banche tendono ad avere codice iframe-busting in ogni caso, ma ancora ...)

Siete alla ricerca di questa funzione nativa: https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage

Ed ecco una biblioteca github mia azienda utilizza per renderlo più trasversale browser compatibile: https://github.com/daepark/postmessage

jbabey è corretto, se gli iframe sono nello stesso dominio e protocollo, quindi è più semplice.

Opera Docs ha spiegato questo con migliori esempi rilevanti https://dev.opera.com/articles/window-postmessage-messagechannel/#channel

0

Per prima cosa, l'unico modo in cui un telaio in grado di interagire al di fuori di essa, di per sé è se il contenuto caricato in entrambi i luoghi è dello stesso dominio altrimenti si sta andando per ottenere un errore CORS.

Supponendo che sia tutto, creo un oggetto gestore sull'oggetto finestra del frame principale.

window.Mgmt = { 
    frame1: $('iframe#frame1'), 
    frame2: $('iframe#frame2') 
} 

poi in uno dei iframe si dovrebbe essere in grado di accedere a tale oggetto utilizzando window.parent.Mgmt.frame1, ecc