Die folgende Tabelle enthält die Ergebnisse der homologen Erkennung in Bezug auf http://store.company.com/dir/page.html:
Um Cross-Domänen-Probleme zu lösen, können wir die folgenden Methoden anwenden:
1. Cross-Domain durch JSONP
In JS ist es nicht möglich, Daten mithilfe von XMLHTTPrequest direkt an verschiedenen Domänen anzufordern. Es ist jedoch in Ordnung, JS -Skriptdateien auf verschiedenen Domänen auf der Seite einzuführen, und JSONP verwendet diese Funktion, um dies zu erreichen.
Zum Beispiel gibt es eine A.HTML -Seite und der Code muss AJAX verwenden, um JSON -Daten auf einer anderen Domäne zu erhalten. In a.html das ist es:
Wir sehen, dass es nach der Adresse der Datenerfassung einen Rückrufparameter gibt. Wenn die JSONP -Adressseite zum Erhalt von Daten nicht von Ihnen gesteuert wird, müssen Sie natürlich gemäß dem angegebenen Format der Partei arbeiten, das die Daten bereitstellt.
Da es als JS -Datei eingeführt wird, muss die Rückgabe von http://example.com/data.php eine ausführbare JS -Datei sein, sodass der PHP -Code dieser Seite möglicherweise so aussieht:
Das Endergebnis dieser Seiteausgabe ist:
Die JS-Datei, die über http://example.com/data.php?callback=dosomething erhalten wurde, ist also die Dosenfunktion, die wir zuvor definiert haben, und ihre Parameter sind die JSON-Daten, die wir benötigen. Deshalb erhalten wir die Cross-Domain, die wir benötigen.
Auf diese Weise ist das Prinzip von JSONP sehr klar. als Parameter übergeben. Daher verlangt JSONP, dass die serverseitige Seite entsprechend zusammenarbeiten kann.
Nachdem wir das Prinzip der Cross-Domain von JSONP kennen, können wir JS verwenden, um Skript-Tags für Cross-Domänen-Operationen dynamisch zu generieren, ohne die Skript-Tags absichtlich manuell zu schreiben. Wenn Ihre Seite JQuery verwendet, kann die Kapselungsmethode verwendet werden, um JSONP -Vorgänge sehr bequem auszuführen.
Das Prinzip ist das gleiche, außer dass wir keine Skript -Tags manuell einfügen und die Funktion zurück definieren müssen. JQuery generiert automatisch eine globale Funktion, um das Fragezeichen in Callback = zu ersetzen, und zerstört dann die Daten automatisch, nachdem sie sie erhalten hat. Die $ .getJSon-Methode enthält automatisch, ob es sich um eine Cross-Domain handelt. Laden von JS -Dateien.
2. Cross Subdomain durch Änderung des Dokuments.Domain
Browser haben eine homologe Politik, und eine ihrer Einschränkungen besteht darin, dass wir in der ersten Methode sagten, dass Dokumente aus verschiedenen Quellen nicht über die AJAX -Methode angefordert werden können. Seine zweite Einschränkung besteht darin, dass die JS -Interaktion zwischen Frameworks verschiedener Domänen im Browser nicht durchgeführt werden kann. Eine Sache zu beachten ist, dass verschiedene Frameworks (Vater und Sohn oder Peer -Generation) die Fensterobjekte des anderen bekommen können, aber der Schmerz ist, dass Sie die Eigenschaften und Methoden der erhaltenen Fensterobjekte nicht verwenden können (Postmessage -Methode in HTML5 Es ist eine Ausnahme. Einige Browser wie IE6 können auch einige Attribute wie Top und Eltern verwenden. Es gibt beispielsweise eine Seite, deren Adresse http://www.example.com/a.html ist. Diese Seite enthält verschiedene Domänen aus dem Iframe -Framework darin, sodass wir Dinge nicht im IFrame erhalten können, indem wir JS -Code auf der Seite schreiben:
Zu diesem Zeitpunkt kann document.domain nützlich sein. Stellen Sie es auf denselben Domainnamen ein. Es ist jedoch zu beachten, dass die Einstellung des Dokuments begrenzt ist. Zum Beispiel: Das Dokument.Domain eines Dokuments in abplampample.com kann auf eine von Abexample.com, b.example.com und example.com festgelegt werden, kann jedoch nicht auf cabexample.com festgelegt werden, da dies ein Kind ist Von der aktuellen Domänendomäne können Sie sie nicht auf baidu.com einstellen, da die Hauptdomäne nicht mehr gleich ist.
Setzen Sie document.domain auf der Seite http://www.example.com/a.html:
Document.domain ist auch auf der Seite http://example.com/b.html festgelegt, und dies ist auch erforderlich.
Auf diese Weise können wir über JS auf verschiedene Eigenschaften und Objekte im Iframe zugreifen.
Wenn Sie jedoch die Seite http://example.com/b.html direkt über AJAX in der Seite http://www.example.com/a.html anfordern möchten, auch wenn Sie das gleiche Dokument festlegen.Domain, Es funktioniert immer noch. Wenn Sie über die AJAX -Methode mit Seiten verschiedener Subdomänen interagieren möchten, können Sie neben der JSONP -Methode auch einen versteckten Iframe verwenden, um als Proxy zu fungieren. Das Prinzip besteht darin, dass dieses Iframe eine Seite mit derselben Domäne wie die Zielseite laden, die Sie über AJAX erhalten möchten. Daher kann die Seite in diesem Iframe AJAX verwenden, um die gewünschten Daten zu erhalten, und dann habe ich dann über uns erwähnt, Dass die Methode zur Änderung von Dokument.Domain ermöglicht, dieses Iframe vollständig über JS zu steuern, sodass wir die Iframe -AJAX -Anfrage senden lassen können und die empfangenen Daten auch erhalten können.
3. Verwenden Sie das Fenster. NAME, um die Domäne zu domäne
Das Fensterobjekt hat ein Namensattribut, das eine Funktion hat: Dh während des Lebenszyklus eines Fensters gibt es alle Seiten, die durch das Fenster ein Fenster teilen, und jede Seite enthält ein Fenster und schreiben Sie Berechtigungen, Fenster.Name bleibt auf allen Seiten bestehen, die von einem Fenster geladen wurden, und wird aufgrund des Ladens neuer Seiten nicht zurückgesetzt.
Zum Beispiel: Es gibt eine Seite A.HTML, die den folgenden Code enthält:
Schauen wir uns den Code der b.html -Seite an:
3 Sekunden nach dem Laden der A.html -Seite springt es auf die b.html -Seite, und das Ergebnis ist:
Wir sehen, dass der Wert, der auf der vorherigen Seite eingestellt wurde, auf der Seite B.HTML erfolgreich erhalten wurde. Wenn alle geladenen Seiten das Fenster nicht geändert haben.Name danach, ist der Wert des Fensters. NAME, der von all diesen Seiten erhalten wird, ist der Wert, der von der A.html -Seite festgelegt wurde. Natürlich kann eine der Seiten bei Bedarf den Wert des Fensters ändern. Beachten Sie, dass der Wert des Fensters.name nur in Form einer Zeichenfolge erfolgen kann.
Im obigen Beispiel befinden sich die von uns verwendeten Seiten. Das Prinzip der Cross-Domäne unter Verwendung von window.name.
Schauen wir uns an, wie Sie Daten über window.name über Domänen hinweg erhalten. Lassen Sie uns ein Beispiel geben.
Beispielsweise gibt es eine Seite www.example.com/a.html, und Sie müssen JS auf der A.HTML -Seite verwenden, um die Daten auf einer anderen Seite auf einer anderen Domain www.cnblogs.com/data.html zu erhalten .
Der Code in der Seite "Data.html" ist sehr einfach, um den Datenwert festzulegen, den die A.html -Seite für das aktuelle Fenster erhalten möchte. Code in Data.html:
Wie laden wir auf der A.HTML -Seite die Seite data.html? Offensichtlich können wir die Seite von Data.html nicht direkt laden, indem wir die Fenster ändern. Die Antwort ist die Verwendung eines versteckten Iframe auf der A.html -Seite, um als Vermittler zu fungieren, und der Iframe erhält die Daten von Daten.html, und dann erhält A.HTML die vom Iframe erhaltenen Daten.
Wenn ein Iframe, der als Mittelsmann fungiert, den Datensatz über window.name von data.html erhalten möchte, müssen Sie nur den SRC dieses IFrame auf www.cnblogs.com/data.html festlegen. Dann möchte A.html die vom IFrame erhaltenen Daten erhalten, dh, um den Wert des Fensters des Iframe zu erhalten. A.html in der gleichen Ursprungsstrategie kann nicht auf das Fenster zugreifen. Dies ist der gesamte Cross-Domain-Prozess.
Schauen Sie sich den Code der A.HTML -Seite an:
Der obige Code ist nur der einfachste Prinzip -Demonstrationscode. ein Proxy. Es gibt auch viele ähnliche fertige Codes im Internet.
Cross-Domain durch Fenster.name, das war's.
4. Verwenden Sie das neu eingeführte Fenster.
Window.PostMessage (Message, TargetOrigin) ist eine neu eingeführte Funktion von HTML5. , Opera usw. Alle Maschinen unterstützen bereits das Fenster.
Das Fensterobjekt, das die Postmessage -Methode aufruft, bezieht sich auf das Fensterobjekt, das die Nachricht empfängt. Die Nachricht, die empfangen wird.
Das Fensterobjekt, das Nachrichten erhalten muss, kann durch Anhören seines eigenen Nachrichtenereignisses erhalten werden, und der Nachrichteninhalt wird im Datenattribut des Ereignisobjekts gespeichert.
Die oben genannten Senden von Nachrichten an andere Fensterobjekte beziehen sich tatsächlich auf die Situation, in der eine Seite über mehrere Frames verfügt, da jeder Frame über ein Fensterobjekt verfügt. Bei der Diskussion der zweiten Methode sagten wir, dass das Fensterobjekt der anderen Partei zwischen den Frameworks verschiedener Domänen und der Fenster -PostMessage -Methode verwendet werden kann. Hier ist ein einfaches Beispiel mit zwei Seiten
Das Ergebnis, das wir nach dem Ausführen einer Seite erhalten:
Wir haben gesehen, dass Seite B die Nachricht erfolgreich erhalten hat.
Es ist ziemlich intuitiv und bequem, Postmessage zu verwenden, um Daten über Domänen hinweg zu übertragen, aber der Nachteil ist, dass IE6 und IE7 sie nicht unterstützen. Ob Sie sie verwenden möchten oder nicht, hängt also von den tatsächlichen Anforderungen ab.