cross site iframe postMessage da child a parent

Question

Ho trovato questo sample da SO mentre cercavo il mio problema, ma voglio sapere esattamente come usarlo nel mio scenario. Ho un iframe che proviene da un altro dominio e voglio rilevare quando l'URL dell'iframe viene cambiato da una pagina all'altra in quell'altro dominio. Allora, che cosa stavo pensando è quello di avere qualcosa di simile quando si apre il 2 ° pagina nel iframe:

<script type="text/javascript"> 
    $(document).ready(function() { 
parent.postMessage("Second Page"); 
} 
</script> 

Questo è tutto quello che ho bisogno, ho solo bisogno di ricevere un messaggio che l'iframe ha URL diverso. Ora sulla pagina padre, io potrei avere qualcosa di simile:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#frame').load(function() { 
      var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

// Listen to message from child window 
eventer(messageEvent,function(e) { 
var secondPageValue = // I want to get the value from the child page here, how can I do that? 
},false);    
     }); 
    }); 
</script> 

Sto cercando di utilizzare questa opzione postMessage per la prima volta, in modo che ogni consiglio sarà molto apprezzato. Inoltre, ho bisogno di includere alcune librerie JS come jquery sul lato bambino per farlo funzionare?

Grazie in anticipo, Laziale

Answer 1

è necessario impostare targetOrigin quando si utilizza postMessage.

<script type="text/javascript"> 
    $(document).ready(function() { 
     parent.postMessage("Second Page",'*'); 
    } 
</script> 

Quindi nella pagina host.

Answer 2

Verificare http://davidwalsh.name/window-iframe out. Questo è un perfetto esempio di lavoro.

L'oggetto padre fornisce un riferimento alla finestra principale dal figlio. Quindi, se ho un iFrame e la console del genitore al suo interno, la console leggerà:

// Every two seconds.... 
setInterval(function() { 
    // Send the message "Hello" to the parent window 
    // ...if the domain is still "davidwalsh.name" 
    parent.postMessage("Hello","http://davidwalsh.name"); 
}, 3000); 

Dal momento che ora abbiamo in mano la finestra, possiamo PostMessage ad esso:

// Create IE + others compatible event handler 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

// Listen to message from child window 
eventer(messageEvent,function(e) { 
    console.log('parent received message!: ',e.data); 
},false); 

La direttiva di cui sopra attiva l'iFrame per inviare un messaggio alla finestra principale ogni 3 secondi. Non è necessario alcun messaggio iniziale dalla finestra principale!