2012-10-24 12 views
24

Ho creato una pagina che viene caricata in un IFrame e deve richiamare una funzione nella pagina padre al termine del caricamento.Come consentire a un Iframe secondario di chiamare una funzione nella relativa finestra padre da un dominio diverso

Funziona a livello locale in fase di sviluppo (sullo stesso dominio), ma nel mondo reale è ospitato su un dominio completamente diverso, quindi ovviamente io sono in esecuzione in problemi dominio Croce, vale a dire:

Unsafe JavaScript tentativo di accesso frame con URL http: // [...] site1.com da frame con URL http: // [...] site2.com/iframe. Domini, protocolli e porte devono corrispondere.

Controllo entrambi i server, quindi è possibile che io metta qualcosa su uno o entrambi i server che dice che possono parlare tra loro?

Ho visto l'impostazione "document.domain" sia nella pagina Iframe che nella pagina padre.

Ho sperimentato con l'impostazione del controllo di intestazione di accesso:

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

Ma nessuno di questi lavori.

C'è un modo per consentire ad un Iframe di chiamare una funzione nella finestra Genitore su un dominio completamente diverso quando controllo entrambi i server?

+0

Questo [post] (http://stackoverflow.com/questions/5477324/iframe-calling-parent-javascript) fornisce una soluzione estremamente semplice. – craned

risposta

70

È possibile comunicare tra frame tramite message posting API.

Per esempio, nella cornice del bambino che si potrebbe chiamare:

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

E nel frame principale, registrare un gestore di messaggi:

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

Nei browser moderni, è possibile utilizzare per comunicare tra frame cooperanti su domini diversi. Non è possibile chiamare direttamente una funzione, ma è possibile passare dati o messaggi tra i due. Vedi lo description on MDN.

2

Questo problema può essere facilmente risolto utilizzando una riscrittura .htaccess.

Demo:

A. Creare una directory denominata "iframeContent /" sul server 1.

B. Luogo in quella directory un file chiamato index.php contenente:

<html> 
<head></head> 
<body> 

<script type="text/javascript"> 

    parent.check(); 

</script> 

</body> 
</html> 

Questo è il contenuto di iFrame. Chiamerà una funzione in un genitore.

C. Creare una directory chiamata "iframeTesting_without-.htaccess /" sul server 2.

D. Mettere in quella directory un file di nome di indice.php contenente:

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

Questo è semplicemente il contenuto delle finestre genitore. Basta notare che il contenuto iFrame si trova su un altro server (perché su SERVER 1).

E. Accesso "PATH-ON-SERVER-2/iframeTesting_without-htaccess /" con un browser web -> non accade nulla: l'iframe non ha accesso alla funzione del suo genitore.

Ecco come si può risolvere il problema

F. Creare un'altra directory chiamata "iframeTesting_with-.htaccess /" sul server 2.

G. posto in quella directory un file chiamato index.php contenente:

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

Questa volta l'iFrame non punta più direttamente alla con tent su SERVER 1 ma su una directory fictive intermedia "content-iframe /" situata sullo stesso server (SERVER 2).

H. posto in quella directory un file .htaccess contenente:

Options +FollowSymLinks 
RewriteEngine On 

RewriteBase/

RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P] 

Il ruolo di tale file è quello di reindirizzare qualsiasi accesso alla directory fittizia al contenuto sul server 1.

I. Riprovare, accedere a "PATH-ON-SERVER-2/iframeTesting_with-htaccess /" con un browser web. Questa volta funzionerà. Spero sia stato utile :-)

Problemi correlati