El código del documento exterior albergado en http://ejohn.org/apps/message/ y que emite el mensaje sería:
<iframe id='iframe' src='http://dev.jquery.com/~john/message/'/>
<form id='form'>
<input value='Mensaje a enviar' id='msg' type='text'/>
<input type='enviar'/>
</form>
<script>
window.onload = function(){
var win = document.getElementById("iframe").contentWindow;
document.getElementById("form").onsubmit = function(e){
win.postMessage(
document.getElementById("msg").value,
"http://dev.jquery.com"
);
e.preventDefault();
};
};
</script>
Y el código del iframe interior que estaría albergado en http://dev.jquery.com/~john/message/ y que recibe el mensaje sería:
<b>Este iframe estaría en dev.jquery.com</b>
<div id='test'>Enviame un mensaje!</div>
<script>
window.addEventListener("message", function(e){
if ( e.origin !== "http://ejohn.org" )
return;
document.getElementById("test").textContent = e.origin + " said: " + e.data;
}, false);
</script>
No hay comentarios:
Publicar un comentario