Enviar mensaje a un iFrame

En este ejemplo vamos a ver cómo podemos enviar un mensaje a un iframe desde la página que lo contiene utilizando el API Web Messaging definido en HTML5. Es interesante que le eches un ojo al artículo que explica las bases del envío de mensajes Web Messaging en HTML5.

Crear la página padre

Lo primero que vamos a construir será la página padre. Esta página lo que hará será llamar a un elemento iframe al cual luego vamos a pasar la información.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Web Messaging</title>
</head>
<body>

  <h1>Web Messaging</h1>
  <iframe id="myiframe" src="detectar-evento.html" width="1000px" height="500px"></iframe>

</body>
</html>

Es importante que le des un valor al atributo id del iframe, ya que luego lo vamos a utilizar.

Añadir botón y manejador de eventos

Ahora vamos a crear un botón el cual será el encargado de enviar el mensaje. Tendremos que crear un manejador mediante un método .addEventListener() que nos permita actuar cuando se haga click sobre dicho botón.

<button id="boton">Enviar Mensaje</button>

<script>
    boton = document.getElementById("boton");
    boton.addEventListener("click",function() {...});
</script>

Enviar el mensaje con postMessage

Lo que vamos hacer ahora es coger la referencia del iframe y sobre su atributo contentWindow invocaremos al método .postMessage(). Será en este método dónde insertemos el mensaje que tenemos que enviar al iframe. Como segundo parámetro del método .postMessage() podemos indicar el origen del mensaje o indicar un asterisco ”*”, tal y como hemos hecho, para no reflejar la procedencia. El código quedaría de la siguiente manera:

<button id="boton">Enviar Mensaje</button>

<script>
    boton = document.getElementById("boton");
    boton.addEventListener("click",function() {
        myiframe = document.getElementById("myiframe");
        myiframe.contentWindow.postMessage("Hola",'*');
    });
</script>

Preparar la página anidada para recibir mensajes

Una vez que hemos montado nuestra página que carga el iframe y que se encarga de enviar un mensaje a dicho iframe vamos a generar el código de la página anidada.

Básicamente, lo que tenemos que hacer en la página anidada, es prepararla para poder recibir mensajes. Es decir, prepararla para que pueda manejar el evento message. Esto lo podremos hacer mediante código Javascript o mediante el atributo onmessage del elemento body. De esta segunda forma quedaría codificado así:

<body onmessage="mensajeRecibido(event);">

Crear el manejador del mensaje

Ahora pasamos a codificar el manejador que lo que hará será mostrar el contenido del mensaje recibido en el iframe accediendo a su propiedad .data y volcando su contenido a un elemento p de nuestra página web.

<p id="texto"></p>

<script>
  function mensajeRecibido(e) {
    texto = document.getElementById("texto");
    texto.innerHTML = "Mensaje Recibido: " + e.data;
  }
</script>

Y de esta forma tan sencilla y codificando las dos páginas HTML5 habremos conseguido enviar un mensaje a un iframe mediante la API Web Messaging del estándar HTML5.

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Enviar mensaje a un iFrame

Aprende a enviar mensajes a un iFrame utilizando la API Web Messaging de HTML5 y mejora la interacción entre tus páginas web de forma sencilla y efectiva.

Descargar código