Comunicazione iframe tra domini

Question

Ho creato un iframe su una pagina e il dominio della pagina è impostato in modo esplicito su "xyz.com", ma il dominio dell'iframe è predefinito su "dev.xyz.com", che è il nome dominio effettivo per il quale sto sviluppando.

Il problema è che quando provo ad accedere a quell'iframe tramite iframe.contentWindow.document, fallisce a causa della differenza nel dominio.

Ho provato a installare src del iframe per un file con document.domain = 'xyz.com', ma che non sembrano fare il trucco ...

Tutte le idee?

Answer 1

Pagina iframe all'interno:

<script> 
document.domain = document.domain; 
</script> 

Sembra stupido, ma funziona. Vedi "What does document.domain = document.domain do?".

Answer 2

Dopo alcune ricerche, ho trovato questo jQuery plugin che rende postMessage retrocompatibile con i browser più vecchi utilizzando vari trucchi.

Ecco un breve esempio che mostra come inviare l'altezza del corpo del iframe alla finestra padre:

Sul host (genitore) pagina:

// executes when a message is received from the iframe, to adjust 
    // the iframe's height 
    $.receiveMessage(
     function(event){ 
      $('my_iframe').css({ 
       height: event.data 
      }); 
    }); 
    // Please note this function could also verify event.origin and other security-related checks. 

Nella pagina iframe :

$(function(){ 

    // Sends a message to the parent window to tell it the height of the 
    // iframe's body   
    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); 

    $.postMessage(
     $('body').outerHeight(true) + 'px', 
     '*', 
     target 
    ); 

}); 

ho provato questo su Chrome 13+, Firefox 3.6 e versioni successive, IE7, 8 e 9 su XP e W7, safari su OSX e W7. ;)

Answer 3

In aggiunta al riferimento al plug-in Ben Alman ho pensato di pubblicare questo esempio di lavoro. E 'rRelude su un iframe che ha una pagina sorgente contenente l'autenticazione jquery & script di query di dati che poi passa il risultato alla finestra genitore di {altro dominio} usando il plugin del messaggio.

NB messaggio di plug-in si romperà se si utilizza JQ v9 come JQV9 non usa "browser" si fa riferimento nel plugin

primo passo: aggiungere il codice plugin per entrambi i documenti invio e la ricezione:

http://benalman.com/projects/jquery-postmessage-plugin/

2 ° passo: Aggiungi questo al documento di invio:

$.postMessage(
$(X).html(),  
'http://DOMAIN [PORT]/FOLDER/SUBFOLDER/RECIEVINGDOCNAME.XXX' 
) ;  

Dove X può essere una var locale contenente l'array json preformattato o altra roba e l'url http qui è l'indirizzo del documento ricevente.

3 ° passo: Aggiungere questo di ricevere doc:

$.receiveMessage(
    function(event){ 
     alert("event.data: "+event.data); 
       $("#testresults").append('<h1>'+event.data+'<h1>'); 

    },   
    'http://DOMAIN.COM OR SOMETHING' 

); 

in cui l'URL http è il dominio del documento di invio. Buono in IE 8, 9, FF16, Safari Windows (Windows Wait x V9 non ancora testato), safari x mac thing.

Il risultato è qualsiasi elemento che si desidera da un'altra pagina di dominio (a cui si ha accesso ..).