same origin domain cross allow javascript iframe cross-domain

javascript - origin - Permitir que un iframe hijo llame a una función en su ventana principal desde un dominio diferente



javascript parent iframe (4)

En los navegadores modernos, puede usar window.postMessage() para comunicarse entre marcos cooperantes en diferentes dominios. No puede llamar a una función directamente, pero puede pasar datos o mensajes entre los dos. Ver la descripción en MDN .

He creado una página que se carga en un IFrame y necesita llamar a una función en la página principal después de que termine de cargarse.

Funciona localmente en el desarrollo (en el mismo dominio) pero en el mundo real está alojado en un dominio completamente diferente, así que obviamente me encuentro con problemas de dominio cruzado, es decir:

JavaScript inseguro intenta acceder al marco con la URL http: // [...] sitio1.com desde el marco con la URL http: // [...] site2.com/iframe. Deben coincidir los dominios, protocolos y puertos.

Yo controlo ambos servidores, entonces ¿es posible para mí poner algo en uno o ambos servidores que dice que se les permite hablar entre ellos?

He examinado la configuración de "document.domain" tanto en la página Iframe como en la página principal.

He experimentado con la configuración del encabezado de control de acceso:

encabezado (''Access-Control-Allow-Origin: *'');

Pero ninguno de esos funciona.

¿Hay alguna manera de permitir que un Iframe invoque una función en la ventana principal en un dominio completamente diferente cuando controlo ambos servidores?

Este problema se puede resolver fácilmente mediante el uso de una reescritura de .htaccess .

Manifestación:

A. Cree un directorio llamado "iframeContent /" en el SERVIDOR 1.

B. Coloque en ese directorio un archivo llamado index.php que contenga:

<html> <head></head> <body> <script type="text/javascript"> parent.check(); </script> </body> </html>

Este es el contenido del iFrame. Llamará a una función en un padre.

C. Cree un directorio llamado "iframeTesting_without-htaccess /" en el SERVIDOR 2.

D. Coloque en ese directorio un archivo llamado index.php que contenga:

<html> <head></head> <body> <script type="text/javascript"> function check() { alert("hello"); } </script> <iframe id="sidebnrId" name="sidebnr" src="PATH-ON-SERVER-1/iframeContent/" frameborder="0" height="500px" width="600px" scrolling="no"></iframe> </script> </body> </html>

Este es simplemente el contenido de las ventanas principales. Solo tenga en cuenta que el contenido de iFrame está ubicado en otro servidor (porque en el SERVIDOR 1).

E. Acceda a "PATH-ON-SERVER-2 / iframeTesting_without-htaccess /" con un navegador web -> no ocurre nada: el iframe no tiene acceso a la función de su principal.

AQUÍ ES CÓMO PUEDES RESOLVER EL PROBLEMA

F. Cree otro directorio llamado "iframeTesting_with-htaccess /" en el SERVIDOR 2.

G. Coloque en ese directorio un archivo llamado index.php que contenga:

<html> <head></head> <body> <script type="text/javascript"> function check() { alert("hello"); } </script> <iframe id="sidebnrId" name="sidebnr" src="content-iframe/" frameborder="0" height="500px" width="600px" scrolling="no"></iframe> </script> </body> </html>

Esta vez, el iFrame ya no apunta directamente al contenido en el SERVIDOR 1 sino a un directorio ficticio intermedio "contenido-iframe /" ubicado en el mismo servidor (SERVIDOR 2).

H. Coloque en ese directorio un archivo .htaccess que contenga:

Options +FollowSymLinks RewriteEngine On RewriteBase / RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P]

La función de ese archivo es redirigir cualquier acceso al directorio ficticio al contenido en el SERVIDOR 1.

I. Vuelva a intentarlo, acceda a "PATH-ON-SERVER-2 / iframeTesting_with-htaccess /" con un navegador web. Esta vez funcionará. Espero que haya sido de ayuda :-)

Puede comunicarse entre fotogramas a través de la API de publicación de mensajes .

Por ejemplo, en el marco de su hijo puede llamar:

parent.postMessage("child frame", "*");

Y en el marco principal, registre un manejador de mensajes:

window.addEventListener("message", function(event) { console.log("Hello from " + event.data); });