Cross-Domain ist ein häufiges Problem in der Front-End-Entwicklung. Aufgrund der homologen politischen Einschränkungen des Browsers werden in der Regel Cross-Domänen-Anfragen blockiert, was den Entwicklern bestimmte Herausforderungen darstellt. In bestimmten Szenarien müssen wir jedoch die Datenkommunikation zwischen verschiedenen Subdomänen implementieren. In diesem Artikel wird vorgestellt, wie das Dokument verwendet wird. Domain- und Iframe-Technologien, um das Problem der Quer-Subdomain-Kommunikation zu lösen.
Bevor wir in die spezifische Lösung eintauchen, verstehen wir zunächst die Rolle des Dokuments.Domain. document.domain ist eine Zeichenfolgeneigenschaft, die den Domänennamen des aktuellen Dokuments angibt. Wenn die URL der Seite "http://www.example.com" lautet, können wir den Domänennamen der Seite in "example.com" ändern, indem wir document.domain = "example.com" einstellen, wodurch die Kommunikation über Subdomains hinweg ermöglicht.
Zunächst erstellen wir eine übergeordnete Seite unter dem Hauptdomainnamen, der als Transitstation für die Datenkommunikation fungiert. Um die Konsistenz der Subdomänen aufrechtzuerhalten, müssen wir das Dokument festlegen. Domäne. Die spezifischen Schritte sind wie folgt:
// übergeordnete Seite (http://www.example.com) document.domain = "example.com";
Als nächstes erstellen wir einen Iframe unter dem Hauptdomänennamen und laden die Seite unter dem Namen Subdomain.
// übergeordnete Seite (http://www.example.com) <iframe src="http://sub.example.com/child.html"></iframe>
Auf der Subdomain -Seite, Dokument.Domain ist auch als Hauptdomänenname festgelegt, um eine normale Kommunikation zwischen den übergeordneten und untergeordneten Domänen sicherzustellen. Die spezifischen Operationen sind wie folgt:
// Subdomain -Name Seite (http://sub.example.com/child.html) document.domain = "example.com";
Auf der Subdomain -Seite können Sie durch Zugriff auf das Fenster. Parentes Objekt können die globalen Variablen und Methoden der übergeordneten Seite erhalten. Wir können dies nutzen, um aktiv Anfragen an die übergeordnete Seite auf der Subdomain -Seite zu senden, um über die Subdomain zu kommunizieren. Der Code ist wie folgt:
// Subdomain -Name Seite (http://sub.example.com/child.html) var parentWindow = Fenster.Parent; parentwindow.postmessage ("Hallo, übergeordnete Seite!", "http://www.example.com");
Auf der übergeordneten Seite können wir Nachrichten erhalten, die von der Kinderseite gesendet werden, indem wir das Nachrichtenereignis anhören. Das Codebeispiel lautet wie folgt:
// übergeordnete Seite (http://www.example.com) window.addeventListener ("meldung", Funktion (Ereignis) { console.log ("Nachricht von sub Seite empfangen:" + event.data); }, FALSCH);
Durch die Kombination von Dokument.Domain und Iframe können wir die Datenkommunikation über Subdomänen hinweg implementieren. Diese Methode ist für die gleichen Szenarien wie die übergeordnete Domäne und die Kinderdomäne geeignet und kann Entwicklern helfen, die durch Quer-Subdomains verursachten Probleme zu lösen. Während des Implementierungsprozesses müssen Entwickler besondere Aufmerksamkeit auf die Sicherheit achten und potenzielle Sicherheitslücken vermeiden. Auf diese Weise können wir effizienter mit Cross-Domänen-Problemen umgehen.