El otro día estaba trasteando con unos experimentos, y me topé con que necesitaba cargar un iframe (si, un iframe a estas alturas) en un sitio web. Os cuento la situación y como pensaba resolverlo.
Tenemos un sitio web y queremos cargar en una de nuestras páginas, un formulario que creamos en otra, para ello lo vamos a cargar en un iframe. Hasta ahora tan simple como pasarle la URL al tag iframe. En mi caso, dependiendo un enlace pulsado en la primera página (el «padre») quería que en un formulario del iframe se auto seleccionara un valor de un combo.
Página padre:
var iframe = document.getElementById( "idIframe" ); var ifrDocument = iframe.contentDocument || iframe.contentWindow.document; var selectElement = ifrDocument .getElementById( "mySelect" ); selectElement.selectedIndex = *El valor que necesitaba*
Con ese código javascript puedo inicializar por defecto el valor del combo del iframe desde la página padre. No hay mucho problema hasta aquí. Pero ¿Qué pasaría si ese iframe viene de un sitio remoto? Pues que debido a las políticas modernas de seguridad de los navegadores, no podemos modificar elementos de otra página que son cargados de un iframe (y me parece totalmente lógico).
Sin embargo, si tenemos acceso a esa página que vamos a cargar en el iframe, ( la que está en otro dominio/protocolo/puerto.. y que por tanto nos bloquea el navegador por motivos de seguridad )
El dicho error de seguridad es este:
SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.
Para que podamos seguir interactuando con esa página, necesitamos permisos de edición a la misma, ya que necesitaremos añadir cierto código javascript, como muestro a continuación:
Página principal:
var iframe = document.getElementById('iframeId');
iframe.contentWindow.postMessage(Objeto/Variable a enviar, '*');
Página que vamos a cargar en el iframe:
window.addEventListener('message', function(event) {
console.log(event.data);
});
El objeto event.data es el objeto que ha recibido (y por tanto hemos enviado) desde la otra página. Os lo dejo de manera muy resumida ya que principalmente lo escribo para tenerlo yo a mano, si alguien necesita un ejemplo más desarrollado o tiene alguna duda puede preguntar.
¡Ojo! Este código en nuestras páginas que puedan ser cargadas en iframes de otro origen, debería estar lo más oculto posible ya que es recomendable que nadie excepto nosotros lo usemos, osea que a intentar que no se note y por supuesto que no interfiera con alguna funcionalidad delicada.
Fuente: http://stackoverflow.com/a/25098153/1422434
