Detaillierte Erläuterung der domänenübergreifenden Iframe-Kommunikation encapsulation_jquery

domänenübergreifende Iframe-Kommunikation

Demo ansehen Quellcode herunterladen

Wie wir alle wissen, kann Javascript aufgrund der Sicherheitsbeschränkungen, die Front-End-Javascript für den domänenübergreifenden Zugriff auferlegt, nur auf Inhalte in derselben Domäne zugreifen wie das Dokument, das es enthält.

Anwendungsbeispiel:

Die Anforderung besteht darin, http://www.iframe.com/iframe.html über iframe in http://www.demo.org/top.html einzubetten. Auf der Iframe-Seite möchten Sie durch Klicken auf eine Schaltfläche eine js-Methode auf der oberen Seite aufrufen.

1. Erstellen Sie auf der Startseite eine Methode zur Verwendung durch interne Seiten

Code kopieren Der Code lautet wie folgt:

Funktion testFun (Text) {
Warnung(Text);
}

2. Iframe einbetten in http://www.demo.org/top.html

Code kopieren Der Code lautet wie folgt:

3. Erstellen Sie eine Proxy-Seite unter der Domain www.demo.orghttp://www.demo.org/proxy.htmlfür die domänenübergreifende Kommunikation

4. Fügen Sie die Logik für die Proxy-Seite in

http://www.demo.org/proxy.html hinzu

5. Konfigurieren Sie die Proxy-Seitenadresse über js auf der Seite

http://www.iframe.com/iframe.html

Code kopieren Der Code lautet wie folgt:

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. Kommunikationsmodul über Kissy laden

Code kopieren Der Code lautet wie folgt:

KISSY.use('topproxy', function(S, TopProxy){

//Code ausführen
});

7. Greifen Sie direkt auf http://www.demo.org/top.html

über TopProxy.call unter http://www.iframe.com/iframe.html zu Methoden in , wie zum Beispiel

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

Der erste Parameter der Aufrufmethode ist der globale Methodenname der externen Webseite, der „.“ unterstützt. Es gibt unbegrenzte folgende Parameter, die alle an die Zielmethode übergeben werden.

Hinweis:

1. Es wird möglicherweise nicht sofort nach dem Aufruf ausgeführt. Es wird nach dem Laden des Iframes ausgelöst. Wenn Sie eine nutzlose Methode vorab ausführen möchten.

2. Wenn TopProxyConfig nicht festgelegt ist, wird davon ausgegangen, dass sich der referenzierte Iframe und der übergeordnete Iframe in derselben Domäne (große Domäne) befinden und das oberste Objekt direkt aufgerufen wird.

3. Unter IE678 wird möglicherweise ein Fehler gemeldet, wenn Sie die Systemmethode oben direkt aufrufen, da die Systemmethode „Anwenden“ nicht unterstützt.

Prinzip:

Seite A ist in die Iframe-Seite B eingebettet. Wenn B die Methode von A aufrufen und Daten übergeben möchte, kann B eine Iframe-Seite C in dieselbe Domäne wie Seite A einbetten. C kann über das Fenster „window.top“ auf A zugreifen. Dann können Sie in B den Hash von Cs href ändern, um einige Informationen an C weiterzuleiten, und dann übergibt C die Informationen an A, wodurch indirekt der Zweck erreicht wird, dass B Informationen an A

überträgt