vagacode

Si dos páginas están en el mismo dominio podemos insertar una dentro de la otra usando la etiqueta iframe y, desde cualquiera de ellas, acceder a los datos de ambas o ejecutar funciones.

Hay dos propiedades que permiten acceder a ese contenido contentDocument y contentWindow que devuelven los objetos document y window del iframe..

<iframe src="url_pagina" id="ejemplo"></iframe>

Si usamos un atributo id para identificarla, es sencillo acceder a ellos:

var elIFRAME = document.getElementById("ejemplo"); // es la etiqueta iframe

// usando el objeto window le cambiamos el color de fondo
elIFRAME.contentWindow.document.body.style.backgroundColor = "black";

// o lo podemos hacer usando el objeto document
elIFRAME.contentDocument.body.style.backgroundColor = "blue";

// o podemos leer sus dimensiones:
var ancho = elIFRAME.contentWindow.document.body.scrollWidth;
var alto = elIFRAME.contentWindow.document.body.scrollHeight;

Supongamos que tenemos una página web cualquiera con este contenido:

<div id="contenedor">
	<p onclick="cerrar();">cerrrar</p>
</div>
<script>
	var demo = 123;
	function cambiarCOLOR1(){
		document.getElementById("contenedor").style.backgroundColor = "yellow";	
	}
	function cambiarCOLOR2(color){
		document.getElementById("contenedor").style.backgroundColor = color;	
	}
	function cerrar(){
		parent.cerrarIFRAME();
	}
</script>

La guardamos con el nombre de miejemplo.html y la insertamos en nuestra página principal:

<iframe src="miejemplo.html" id="ejemplo"></iframe>

Ahora, desde la página principal, usando contentWindow podemos ejecutar cualquier función que se encuentre en la página incrustada; por ejemplo:

var elIFRAME = document.getElementById("ejemplo"); // es la etiqueta iframe

// ejecutamos una función
elIFRAME.contentWindow.cambiarCOLOR1();

// ejecutamos otra función enviando un parámetro
elIFRAME.contentWindow.cambiarCOLOR2("lightgray");

// leemos el valor de una variable cualquiera
var dato = elIFRAME.contentWindow.demo;

Y viceversa, desde la página insertada podemos ejecutar una función que se encuentre el la página principal, utilizando parent; así que allí le agregaremos una que permita eliminar o cerrar el iframe:

function cerrarIFRAME(){
	document.getElementById("ejemplo").outerHTML = "";
}

En el ejemplo, los botones se encuentran en la pagina principal y ejecutan las funciones del iframe y en esta, al hacer click en cerrrar se ejecuta la función cerrarIFRAME() que está en la página principal y se elimina la etiqueta.

A simple vista parece complicado pero termina siendo muy sencillo, basta saber que desde la página donde se encuentra la etiqueta iframe podemos ejecutar cualquier función o acceder al contenido de cualquier variable que esté en ella utilizando:

objeto.contentWindow.nombre_funcion();
objeto.contentWindow.nombre_variable;

Y desde el iframe en si mismo, podemos ejecutar cualquier función o acceder a cualquier variable que esté en la página principal, utilizando:

parent.nombre_funcion();
parent. nombre_variable;