wake-up-neo.com

Zulassen, dass ein untergeordneter Iframe eine Funktion in einem übergeordneten Fenster aus einer anderen Domäne aufruft

Ich habe eine Seite erstellt, die in einen IFrame geladen wird und nach dem Laden eine Funktion auf der übergeordneten Seite aufgerufen werden muss.

Es arbeitet lokal in der Entwicklung (auf derselben Domäne), aber in der realen Welt wird es auf einer völlig anderen Domäne gehostet. Daher stelle ich offensichtlich Cross-Domänen-Problemen gegenüber, dh

Unsicherer JavaScript-Versuch, auf Frame mit URL http: // [...] site1.com von Frame mit URL http: // [...] site2.com/iframe zuzugreifen. Domänen, Protokolle und Ports müssen übereinstimmen.

Ich kontrolliere beide Server. Kann ich auf einem oder beiden Servern etwas ablegen, das besagt, dass sie miteinander reden dürfen? 

Ich habe die Einstellung "document.domain" sowohl auf der Iframe-Seite als auch auf der übergeordneten Seite betrachtet.

Ich habe mit dem Einstellen des Access Control Header experimentiert:

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

Aber keine dieser Arbeiten.

Gibt es eine Möglichkeit, zuzulassen, dass ein Iframe eine Funktion im übergeordneten Fenster in einer völlig anderen Domäne aufruft, wenn ich beide Server kontrolliere?

23
Brett

Sie können über die Message-Posting-API zwischen Frames kommunizieren.

In Ihrem untergeordneten Rahmen könnten Sie beispielsweise Folgendes anrufen:

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

Registrieren Sie im übergeordneten Frame einen Meldungshandler:

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

Dieses Problem lässt sich leicht mit einem .htaccess rewrite lösen. 

Demo:

A. Erstellen Sie auf SERVER 1 ein Verzeichnis mit dem Namen "iframeContent /".

B. Legen Sie in diesem Verzeichnis eine Datei mit dem Namen index.php ab, die Folgendes enthält:

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

<script type="text/javascript">

    parent.check();

</script>

</body> 
</html>

Dies ist der Inhalt des iFrame. Es wird eine Funktion in einem übergeordneten Element aufgerufen.

C. Erstellen Sie ein Verzeichnis mit dem Namen "iframeTesting_without-htaccess /" auf SERVER 2.

D. Legen Sie in diesem Verzeichnis eine Datei namens index.php ab, die Folgendes enthält: 

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

Dies ist einfach der Inhalt der übergeordneten Fenster. Beachten Sie, dass sich der iFrame-Inhalt auf einem anderen Server befindet (weil auf SERVER 1).

E. Greifen Sie mit einem Webbrowser auf "PATH-ON-SERVER-2/iframeTesting_without-htaccess /" zu -> nichts passiert: Der iframe hat keinen Zugriff auf die Funktion seines übergeordneten Objekts.

HIER IS WIE SIE DAS PROBLEM LÖSEN KÖNNEN

F. Erstellen Sie ein weiteres Verzeichnis mit dem Namen "iframeTesting_with-htaccess /" auf SERVER 2.

G. Platzieren Sie in diesem Verzeichnis eine Datei namens index.php, die Folgendes enthält: 

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

Der iFrame verweist diesmal nicht mehr direkt auf den Inhalt von SERVER 1, sondern auf ein fiktives Zwischenverzeichnis "content-iframe /", das sich auf demselben Server (SERVER 2) befindet.

H. Platzieren Sie in diesem Verzeichnis eine .htaccess-Datei, die Folgendes enthält: 

Options +FollowSymLinks
RewriteEngine On

RewriteBase /

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

Diese Datei hat die Aufgabe, den Zugriff auf das fiktive Verzeichnis auf den Inhalt auf dem SERVER 1 umzuleiten.

I. Versuchen Sie es erneut, greifen Sie mit einem Webbrowser auf "PATH-ON-SERVER-2/iframeTesting_with-htaccess /" zu. Dieses Mal wird es funktionieren. Ich hoffe es hat geholfen :-)

2
Gilbou

In modernen Browsern können Sie window.postMessage() verwenden, um zwischen kooperierenden Frames in verschiedenen Domänen zu kommunizieren. Sie können eine Funktion nicht direkt aufrufen, aber Sie können Daten oder Nachrichten zwischen den beiden übergeben. Siehe die Beschreibung auf MDN .

1
jfriend00