Acceder a elementos de un iframe que carga contenido remoto

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: JavaScript var iframe = document.getElementById( "idIframe" ); var ifrDocument = iframe.contentDocument || iframe.contentWindow.document; var selectElement = ifrDocument .getElementById( "mySelect" ); selectElement.selectedIndex = *El valor que necesitaba* 12345 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: <span class="pln">SecurityError: Blocked a frame with origin "http://www.&lt;domain&gt;.com" from accessing a cross-origin frame. </span> 12 <span class="pln">SecurityError: Blocked a frame with origin "http://www.&lt;domain&gt;.com" from accessing a cross-origin frame.</span> 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: <span class="kwd">var</span><span class="pln"> iframe </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'iframeId'</span><span class="pun">);</span><span class="pln"> iframe</span><span class="pun">.</span><span class="pln">contentWindow</span><span class="pun">.</span><span class="pln">postMessage</span><span class="pun">(Objeto/Variable a enviar</span><span class="pun">,</span> <span class="str">'*'</span><span class="pun">);</span> 12 <span class="kwd">var</span><span class="pln"> iframe </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'iframeId'</span><span class="pun">);</span><span class="pln">iframe</span><span class="pun">.</span><span class="pln">contentWindow</span><span class="pun">.</span><span class="pln">postMessage</span><span class="pun">(Objeto/Variable a enviar</span><span class="pun">,</span> <span class="str">'*'</span><span class="pun">);</span> Página que vamos a cargar en el iframe: <span class="pln">window</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'message'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">data</span><span class="pun">);</span> <span class="pun">});</span> 123 <span class="pln">window</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'message'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">data</span><span class="pun">);</span><span class="pun">});</span> El objeto event.data es el objeto que ha recibido (y por tanto hemos enviado) desde...

Read More