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.

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.

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>

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 reflear 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>

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);">

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 HTML5 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.

Twittear

0 Compartir