<!-- https://es.stackoverflow.com/q/207601/81450 -->
<!-- Padre-->
<!DOCTYPE html>
<html>
<head>
<title>Emisor y Receptor Prueba</title>
</head>
<body>
<div style="width:45%; float:left;">
<h1>Claseee A</h1>
<h2 class="prueba">Ocultame iFreim!</h2>
<button id="elBotonSaludar">Saludar Iframe</button>
<p>
<input id="elTexto" name="elTexto" type="text" />
<!--Boton que genera la accion en el hijo -->
<button id="elBoton">Oprima porfavor (Desde parent)</button>
</p>
<br />
<div id="losMensajes"></div>
</div>
<iframe
id="elIframe" class="buscadoriframe"
src="hijo.html" width="45%"
height="320px;" style="float:left;"></iframe>
<script>
window.addEventListener("message", recibirMensajes, false);
function recibirMensajes(ev)
{
/*
// Para seguridad verificar el dominio de origen aqui
if (ev.origin !== "http://example.org:8080")
return;
//*/
// Mostramos por consola el origen, tipo y mensaje crudo
console.log(ev.origin, typeof ev.data, ev.data);
// Definimos como procesar los mensajes
// si es string lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun el texto
if('string'==typeof ev.data){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data + "<br/>";
}
// si es object buscamos que sea una accion y que hacer
if('object'==typeof ev.data){
// si accion esta definido y cosas no está vacío
// lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun la accion
if(ev.data.accion && ev.data.cosas){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data.accion))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data.accion + " " +
JSON.stringify(ev.data.cosas) + "<br/>";
// aquí según el tipo de accion
// procesamos las cosas de manera diferente
switch (ev.data.accion){
// si es buscar, mentir
case 'buscar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy buscando " + ev.data.cosas + "<br/>";
break;
// si es cambiar, buscar que cambiar y como
case 'cambiar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy cambiando cosas<br/>";
// recorremos las cosas
for (var que in ev.data.cosas){
// hay una clase para agregar?
if (ev.data.cosas[que].clase){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole la clase "' +
ev.data.cosas[que].clase + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado agregar la clase
document.querySelectorAll(que).forEach(function(el){
el.classList.add(ev.data.cosas[que].clase)
})
}
// hay estilos para cambiar?
if (ev.data.cosas[que].estilos){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole estilos "' +
JSON.stringify(ev.data.cosas[que].estilos) + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado cambiar los estilos
document.querySelectorAll(que).forEach(function(el){
// cambiamos los estilos uno por uno
for(var e in ev.data.cosas[que].estilos) {
el.style[e] = ev.data.cosas[que].estilos[e];
}
})
}
}
break;
}
}
}
// Definimos como procesar los mensajes
}
var soyTuHijo = document.getElementById('elIframe').contentWindow;
// Saludo Genérico
document.getElementById('elBotonSaludar').onclick = function(){
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage(
"Hola Luke!",
'*'
);
}
// Mensaje personalizado :
// enviamos el valor del input como string
document.getElementById('elBoton').onclick = function(){
var mensajeParaEnviar = document.getElementById('elTexto').value;
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage( mensajeParaEnviar, '*' );
}
//** extras **//
/* https://stackoverflow.com/a/3426956/1423096 */
function hashCode(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToRGB(i){
var c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
}
</script>
</body>
</html>
<!-- https://es.stackoverflow.com/q/207601/81450 -->
<!-- Padre-->
<!DOCTYPE html>
<html>
<head>
<title>Emisor y Receptor Prueba</title>
</head>
<body>
<div style="width:45%; float:left;">
<h1>Claseee A</h1>
<h2 class="prueba">Ocultame iFreim!</h2>
<button id="elBotonSaludar">Saludar Iframe</button>
<p>
<input id="elTexto" name="elTexto" type="text" />
<!--Boton que genera la accion en el hijo -->
<button id="elBoton">Oprima porfavor (Desde parent)</button>
</p>
<br />
<div id="losMensajes"></div>
</div>
<iframe
id="elIframe" class="buscadoriframe"
src="hijo.html" width="45%"
height="320px;" style="float:left;"></iframe>
<script>
window.addEventListener("message", recibirMensajes, false);
function recibirMensajes(ev)
{
/*
// Para seguridad verificar el dominio de origen aqui
if (ev.origin !== "http://example.org:8080")
return;
//*/
// Mostramos por consola el origen, tipo y mensaje crudo
console.log(ev.origin, typeof ev.data, ev.data);
// si es string lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun el texto
if('string'==typeof ev.data){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data + "<br/>";
}
// si es object buscamos que sea una accion y que hacer
if('object'==typeof ev.data){
// si accion esta definido y cosas no está vacío
// lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun la accion
if(ev.data.accion && ev.data.cosas){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data.accion))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data.accion + " " +
JSON.stringify(ev.data.cosas) + "<br/>";
// aquí según el tipo de accion
// procesamos las cosas de manera diferente
switch (ev.data.accion){
// si es buscar, mentir
case 'buscar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy buscando " + ev.data.cosas + "<br/>";
break;
// si es cambiar, buscar que cambiar y como
case 'cambiar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy cambiando cosas<br/>";
// recorremos las cosas
for (var que in ev.data.cosas){
// hay una clase para agregar?
if (ev.data.cosas[que].clase){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole la clase "' +
ev.data.cosas[que].clase + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado agregar la clase
document.querySelectorAll(que).forEach(function(el){
el.classList.add(ev.data.cosas[que].clase)
})
}
// hay estilos para cambiar?
if (ev.data.cosas[que].estilos){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole estilos "' +
JSON.stringify(ev.data.cosas[que].estilos) + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado cambiar los estilos
document.querySelectorAll(que).forEach(function(el){
// cambiamos los estilos uno por uno
for(var e in ev.data.cosas[que].estilos) {
el.style[e] = ev.data.cosas[que].estilos[e];
}
})
}
}
break;
}
}
}
// Definimos como procesar los mensajes
}
var soyTuHijo = document.getElementById('elIframe').contentWindow;
// Saludo Genérico
document.getElementById('elBotonSaludar').onclick = function(){
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage(
"Hola Luke!",
'*'
);
}
// Mensaje personalizado :
// enviamos el valor del input como string
document.getElementById('elBoton').onclick = function(){
var mensajeParaEnviar = document.getElementById('elTexto').value;
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage( mensajeParaEnviar, '*' );
}
//** extras **//
/* https://stackoverflow.com/a/3426956/1423096 */
function hashCode(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToRGB(i){
var c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
}
</script>
</body>
</html>
<!-- https://es.stackoverflow.com/q/207601/81450 -->
<!-- Padre-->
<!DOCTYPE html>
<html>
<head>
<title>Emisor y Receptor Prueba</title>
</head>
<body>
<div style="width:45%; float:left;">
<h1>Claseee A</h1>
<h2 class="prueba">Ocultame iFreim!</h2>
<button id="elBotonSaludar">Saludar Iframe</button>
<p>
<input id="elTexto" name="elTexto" type="text" />
<!--Boton que genera la accion en el hijo -->
<button id="elBoton">Oprima porfavor (Desde parent)</button>
</p>
<br />
<div id="losMensajes"></div>
</div>
<iframe
id="elIframe" class="buscadoriframe"
src="hijo.html" width="45%"
height="320px;" style="float:left;"></iframe>
<script>
window.addEventListener("message", recibirMensajes, false);
function recibirMensajes(ev)
{
/*
// Para seguridad verificar el dominio de origen aqui
if (ev.origin !== "http://example.org:8080")
return;
//*/
// Mostramos por consola el origen, tipo y mensaje crudo
console.log(ev.origin, typeof ev.data, ev.data);
// Definimos como procesar los mensajes
// si es string lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun el texto
if('string'==typeof ev.data){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data + "<br/>";
}
// si es object buscamos que sea una accion y que hacer
if('object'==typeof ev.data){
// si accion esta definido y cosas no está vacío
// lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun la accion
if(ev.data.accion && ev.data.cosas){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data.accion))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data.accion + " " +
JSON.stringify(ev.data.cosas) + "<br/>";
// aquí según el tipo de accion
// procesamos las cosas de manera diferente
switch (ev.data.accion){
// si es buscar, mentir
case 'buscar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy buscando " + ev.data.cosas + "<br/>";
break;
// si es cambiar, buscar que cambiar y como
case 'cambiar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy cambiando cosas<br/>";
// recorremos las cosas
for (var que in ev.data.cosas){
// hay una clase para agregar?
if (ev.data.cosas[que].clase){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole la clase "' +
ev.data.cosas[que].clase + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado agregar la clase
document.querySelectorAll(que).forEach(function(el){
el.classList.add(ev.data.cosas[que].clase)
})
}
// hay estilos para cambiar?
if (ev.data.cosas[que].estilos){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole estilos "' +
JSON.stringify(ev.data.cosas[que].estilos) + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado cambiar los estilos
document.querySelectorAll(que).forEach(function(el){
// cambiamos los estilos uno por uno
for(var e in ev.data.cosas[que].estilos) {
el.style[e] = ev.data.cosas[que].estilos[e];
}
})
}
}
break;
}
}
}
}
var soyTuHijo = document.getElementById('elIframe').contentWindow;
// Saludo Genérico
document.getElementById('elBotonSaludar').onclick = function(){
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage(
"Hola Luke!",
'*'
);
}
// Mensaje personalizado :
// enviamos el valor del input como string
document.getElementById('elBoton').onclick = function(){
var mensajeParaEnviar = document.getElementById('elTexto').value;
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage( mensajeParaEnviar, '*' );
}
//** extras **//
/* https://stackoverflow.com/a/3426956/1423096 */
function hashCode(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToRGB(i){
var c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
}
</script>
</body>
</html>
Aquí hay algo armado con la API de mensajes.
La idea es tener una referencia a la ventana padre desde la ventana hija y una referencia a la ventana hija desde la ventana padre.
En ambos casos definimos un manejador de mensajes: recibirMensajes(ev)
, y le enganchamos el evento de escucha al documento correspondiente (padre/hijo) con
window.addEventListener("message", recibirMensajes, false);
Los mensajes se envían de la siguiente manera:
ventanaDestino.postMessage( elMensaje, elOrigen );
elMensaje
puede ser casi cualquier cosa que pueda ser serializada con el algoritmo de clonación estructurada.
elOrigen
es el domino desde y hacia donde se pueden enviar/recibir los mensajes, para pruebas usar '*'
, luego poner el dominio que va.
Te incluyo envío de mensajes de texto para ambos lados, implemento sólo el "mensaje para modificar atributos" del padre (desde el hijo), pues la inversa (de padre a hijo) es el mismo mecanismo.
El "mensaje para modificar atributos" es un objeto que lleva una "acción" y que cosas "usar para" o "modificar con" la acción.
En padre.html
hay 2 botones con 2 mensajes, ambos de texto (string)
- enviar un saludo generico (string)
- enviar el valor del input (string)
En hijo.html
hay 3 botones con 3 mensajes mas o menos diferentes:
- enviar un saludo generico (string)
- enviar una acción (buscar) junto con el valor del input (object)
- enviar una acción (cambiar) para modificar el CSS del padre
En padre.html
los mensajes se imprimen si son (string) y se procesan si son (object) con un switch
para cada acción definida, y un par de foreach
para cada una de las cosas de la acción cambiar.
En hijo.html
los mensajes se imprimen si son (string) y se responde al mensaje si el texto recibido coincide con "soy tu padre".
Algunos ID's se repiten en padre e hijo, es sólo para demostrar que son dos documentos independientes.
El código está bastante comentado, si hay dudas avisame y lo vemos:
padre.html
<!-- https://es.stackoverflow.com/q/207601/81450 -->
<!-- Padre-->
<!DOCTYPE html>
<html>
<head>
<title>Emisor y Receptor Prueba</title>
</head>
<body>
<div style="width:45%; float:left;">
<h1>Claseee A</h1>
<h2 class="prueba">Ocultame iFreim!</h2>
<button id="elBotonSaludar">Saludar Iframe</button>
<p>
<input id="elTexto" name="elTexto" type="text" />
<!--Boton que genera la accion en el hijo -->
<button id="elBoton">Oprima porfavor (Desde parent)</button>
</p>
<br />
<div id="losMensajes"></div>
</div>
<iframe
id="elIframe" class="buscadoriframe"
src="hijo.html" width="45%"
height="320px;" style="float:left;"></iframe>
<script>
window.addEventListener("message", recibirMensajes, false);
function recibirMensajes(ev)
{
/*
// Para seguridad verificar el dominio de origen aqui
if (ev.origin !== "http://example.org:8080")
return;
//*/
// Mostramos por consola el origen, tipo y mensaje crudo
console.log(ev.origin, typeof ev.data, ev.data);
// si es string lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun el texto
if('string'==typeof ev.data){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data + "<br/>";
}
// si es object buscamos que sea una accion y que hacer
if('object'==typeof ev.data){
// si accion esta definido y cosas no está vacío
// lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun la accion
if(ev.data.accion && ev.data.cosas){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data.accion))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data.accion + " " +
JSON.stringify(ev.data.cosas) + "<br/>";
// aquí según el tipo de accion
// procesamos las cosas de manera diferente
switch (ev.data.accion){
// si es buscar, mentir
case 'buscar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy buscando " + ev.data.cosas + "<br/>";
break;
// si es cambiar, buscar que cambiar y como
case 'cambiar':
document.getElementById('losMensajes').innerHTML +=
"[*] Estoy cambiando cosas<br/>";
// recorremos las cosas
for (var que in ev.data.cosas){
// hay una clase para agregar?
if (ev.data.cosas[que].clase){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole la clase "' +
ev.data.cosas[que].clase + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado agregar la clase
document.querySelectorAll(que).forEach(function(el){
el.classList.add(ev.data.cosas[que].clase)
})
}
// hay estilos para cambiar?
if (ev.data.cosas[que].estilos){
// avisamos que hacemos
document.getElementById('losMensajes').innerHTML +=
'[**] agregandole estilos "' +
JSON.stringify(ev.data.cosas[que].estilos) + '" a "' + que + '"<br/>';
// lo hacemos :
// para cada elemento encontrado cambiar los estilos
document.querySelectorAll(que).forEach(function(el){
// cambiamos los estilos uno por uno
for(var e in ev.data.cosas[que].estilos) {
el.style[e] = ev.data.cosas[que].estilos[e];
}
})
}
}
break;
}
}
}
// Definimos como procesar los mensajes
}
var soyTuHijo = document.getElementById('elIframe').contentWindow;
// Saludo Genérico
document.getElementById('elBotonSaludar').onclick = function(){
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage(
"Hola Luke!",
'*'
);
}
// Mensaje personalizado :
// enviamos el valor del input como string
document.getElementById('elBoton').onclick = function(){
var mensajeParaEnviar = document.getElementById('elTexto').value;
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuHijo.postMessage( mensajeParaEnviar, '*' );
}
//** extras **//
/* https://stackoverflow.com/a/3426956/1423096 */
function hashCode(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToRGB(i){
var c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
}
</script>
</body>
</html>
hijo.html
<!-- https://es.stackoverflow.com/q/207601/81450 -->
<!--Hijo-->
<!DOCTYPE html>
<html>
<head>
<title>Emisor y Receptor Prueba</title>
</head>
<body>
<h1 class="prueba">Claseee L</h1>
<button id="elBotonSaludar">Saludar Parent</button>
<p>
<input id="laBusqueda" name="laBusqueda" type="text" />
<!--Boton que genera la accion en el padre -->
<button id="elBotonBuscar">1. Buscar (Desde iFrame)</button>
<button id="elOtroBoton">2. Oprima porfavor (Desde iFrame)</button>
</p>
<div id="losMensajes"></div>
<script>
window.addEventListener("message", recibirMensajes, false);
function recibirMensajes(ev)
{
/*
// Para seguridad verificar el dominio de origen aqui
if (ev.origin !== "http://example.org:8080")
return;
//*/
// Mostramos por consola el origen, tipo y mensaje crudo
console.log(ev.origin, typeof ev.data, ev.data);
// si es string lo añadimos como texto al div "losMensajes"
// intToRGB(hashCode(ev.data.accion)) es usado
// para colorear segun el texto
if('string'==typeof ev.data){
document.getElementById('losMensajes').innerHTML +=
'<span style="color:#'+intToRGB(hashCode(ev.data))+'">'+
'('+ev.origin+') dice:</span> ' +
ev.data + "<br/>";
}
// Definimos como procesar los mensajes
// si es string y es "soy tu padre", responder "Noooo"
// usamos el origen del evento como destinatario
if(
'string' == typeof ev.data &&
'soy tu padre' == ev.data.toLowerCase()
){
event.source.postMessage(
"Nooooo",
event.origin
);
}
}
// definimos destinatario
var soyTuPadre = window.parent;
// Saludo Genérico
document.getElementById('elBotonSaludar').onclick = function(){
soyTuPadre.postMessage("Hola Ancestro!", '*');
}
// Mensaje personalizado :
// enviamos un objeto con instruccion de "buscar" y el texto a buscar
document.getElementById('elBotonBuscar').onclick = function(){
var mensajeParaEnviar = {
accion : 'buscar',
cosas : document.getElementById('laBusqueda').value,
}
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuPadre.postMessage( mensajeParaEnviar, '*' );
}
// Mensaje personalizado :
// enviamos un objeto con instruccion de "cambiar" y las cosas
document.getElementById('elOtroBoton').onclick = function(){
var mensajeParaEnviar = {
accion : 'cambiar',
cosas : {
'h1' : {
clase : 'cambiado',
estilos : {color : '#f00'},
},
'h2' : {
clase : 'cambiado',
estilos : {display : 'none'},
},
'div#losMensajes' : {
clase : 'otraclase',
estilos : {
border : '1px dashed red',
borderRadius : '10px',
padding : '5px',
margin : '5px'
},
}
},
}
// Para seguridad definir el dominio de origen aqui en vez de '*'
soyTuPadre.postMessage( mensajeParaEnviar, '*' );
}
//** extras **//
/* https://stackoverflow.com/a/3426956/1423096 */
function hashCode(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToRGB(i){
var c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
}
</script>
</body>
</html>