iframe messaggistica croce dominio con jQuery postMessage plug

Question

sto cercando di comunicare tra un iframe bambino e suo padre utilizzando il seguente plugin:

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

posso seguire l'esempio e inviare un messaggio dal bambino il genitore ma non il contrario e ho davvero bisogno di essere in grado di comunicare in entrambi i modi.

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 = $('<iframe src="' + src + '" id="data-cash-iframe" width="100%" scrolling="no" allowtransparency="true" seamless="seamless" frameborder="0" marginheight="0" marginwidth="0"></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 è la seguente:

$(function() { 

    var parentURL = decodeURIComponent(document.location.hash.replace(/^#/, '')); 

    $.receiveMessage(
     function (e) { 
      alert(e.data); 
     }, 
     parentURL 
    ); 

}); 

Davvero non riesco a capire perché questo non funziona e sono in disperato bisogno di aiuto!

Answer 1

Non ho mai usato quel plug-in, non posso davvero dire cosa c'è che non va, ma, alternativamente, puoi usare HTML 5 postMessage.

Dal momento che si desidera inviare i dati al iframe, registrare un listener di eventi su di esso:

window.addEventListener('message', receiver, false); 

function receiver(e) { 
    if (e.origin == '*') { 
    return; 
    } else { 
    console.log(e.data); 
    } 
} 

Assicuratevi di controllare l'origine contro il vostro dominio trusted per evitare danni, invece di "*", che accetta tutto .

Ora è possibile chiamare

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

Anche in questo caso, si dovrebbe cambiare "*" con il dominio di destinazione.

Answer 2

Avevo un requisito simile e ho finito per utilizzare 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.

Answer 3

1.sendPage 
<script type='text/javascript'> 
var sendpost = document.getElementById('wrapper').scrollHeight; 
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); 
target.postMessage(sendpost,'*'); 
</script> 
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); 
}