iframe cross domain messaging con jQuery postMessage plugin

Sto cercando di comunicare tra un iframe figlio e il suo genitore usando il seguente plugin:

http://benalman.com/projects/jquerypostmessage-plugin/

Posso seguire l’esempio e postare un messaggio dal bambino al genitore ma non viceversa e ho davvero bisogno di essere in grado di comunicare in entrambe le direzioni.

Il codice sul genitore è il seguente:

var origin = document.location.protocol + '//' + document.location.host, src = origin + '/Custom/Ui/Baseline/html/iframe-data-cash.htm#' + encodeURIComponent(document.location.href); $(function () { var $holder = $('#iframe'), height, $iframe = $(''); // append iframe to DOM $holder.append($iframe); }); $(window).load(function () { $.postMessage( 'hello world', src, parent.document.getElementById('data-cash-iframe').contentWindow ); }); 

E il codice sul bambino è il seguente:

 $(function () { var parentURL = decodeURIComponent(document.location.hash.replace(/^#/, '')); $.receiveMessage( function (e) { alert(e.data); }, parentURL ); }); 

Non riesco davvero a capire perché questo non funzioni e ho un disperato bisogno di aiuto!

Non ho mai usato quel plugin, non posso davvero dire cosa c’è che non va, ma, alternativamente, puoi usare HTML 5 postMessage.

Dato che vuoi inviare dati all’iframe, registra un listener di eventi su di esso:

 window.addEventListener('message', receiver, false); function receiver(e) { if (e.origin == '*') { return; } else { console.log(e.data); } } 

Assicurati di controllare l’origine contro il tuo dominio di fiducia per evitare danni, invece di “*” che accetterà tutto.

Ora puoi chiamare

 message = "data"; iframe = document.getElementById('iframe'); iframe.contentWindow.postMessage(message, '*'); 

Di nuovo, dovresti cambiare “*” con il dominio di destinazione.

 1.sendPage  2. real iframe load page function handling(e){ sendIframeHeight = e.data; } // <= ie8 if (!window.addEventListener) { window.attachEvent("onmessage", handling); }else{ // > ie8 window.addEventListener('message', handling, false); } 

Avevo un requisito simile e ho finito per usare postMessage per inviare dati dal figlio al genitore. Quindi, per inviare dati dal genitore al figlio, ho passato i dati in una stringa di query attraverso l’attributo src dell’iframe. Facendo così, potrei quindi analizzare la stringa di query e recuperare i dati all’interno della mia pagina figlio.