So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern

So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern

Szenario: Wenn Seite A Seite B öffnet, muss Seite A nach der Bedienung auf Seite B die geänderten Daten synchronisieren

Seite A, http://127.0.0.1:10001/A.html

var Domäne = "http://127.0.0.1:10001";

Fenster.öffnen('http://127.0.0.1:10001/B.html');
window.addEventListener('Nachricht', Funktion (Ereignis) {
    wenn (event.origin !== Domäne) zurückgeben;
    console.log('Nachricht empfangen: ' + event.data, event);
}, FALSCH);

B-Seite, http://127.0.0.1:10001/B.html, Opener ist der Verweis auf den Opener des aktuellen Fensters

var Domäne = "http://127.0.0.1:10001";
window.opener.postMessage("Erfolg", Domäne);
fenster.schließen();

Wenn A B öffnen und gleichzeitig Daten an B senden muss

// Daten werden gesendet var domain = 'http://127.0.0.1:10001';
var myPopup = window.open('http://127.0.0.1:10001/B.html');
myPopup.postMessage('Daten', Domäne);

// Daten empfangen window.addEventListener('message', function(event) {
    wenn (event.origin !== 'http://127.0.0.1:10001') return;
    console.log('Nachricht empfangen: ' + event.data,event);
},FALSCH);

Oben finden Sie Einzelheiten zur Verwendung von JS zur Kommunikation zwischen zwei HTML-Fenstern. Weitere Informationen zur JS-Kommunikation zwischen zwei HTML-Fenstern finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der JS-Homologiestrategie und CSRF
  • Detaillierte Erläuterung der JavaScript-Homologierichtlinie und Beispiele für domänenübergreifenden Zugriff
  • Von JS implementierte Ajax- und Homologiestrategie (Beispielerklärung)
  • Detaillierte Erklärung der JS-Homologiestrategie
  • EventBus in JavaScript implementiert die Kommunikation zwischen Objekten
  • Eine kurze Diskussion über die Fallstricke der Echtzeitkommunikation mit Vue WebSocket NodeJS
  • Detaillierte Erklärung der benutzerdefinierten Ereignisse für die Vue.js-Komponentenkommunikation
  • SpringBoot implementiert ein Beispiel für eine domänenübergreifende JSONP-Kommunikationsmethode
  • Detailliertes Codebeispiel, wie untergeordnete Vue.js-Komponenten mit übergeordneten Komponenten kommunizieren
  • Der Prozess der Verwendung von SockJS zur Implementierung der WebSocket-Kommunikation in Vue
  • So implementieren Sie Same-Origin-Kommunikation in JavaScript

<<:  Analysieren Sie MySQL-Transaktionen und Probleme bei der Datenkonsistenzverarbeitung

>>:  Detaillierte Erläuterung des grafischen Tutorials zum Herunterladen, Installieren und Konfigurieren von Win10 DVWA (Lernen von Anfängern)

Artikel empfehlen

Implementierung des Docker-Verpackungsimages und Konfigurationsänderung

Ich bin in letzter Zeit beim Erlernen von Docker ...

Natives js zum Erzielen eines Akkordeoneffekts

Auch bei der tatsächlichen Entwicklung von Websei...

HTML+CSS zur Realisierung einer einfachen Navigationsleistenfunktion

Ohne weitere Umschweife komme ich gleich zum Code...

Beispielcode für CSS-Pseudoklassen zum Ändern des Eingabeauswahlstils

Hinweis: Diese Tabelle ist aus dem W3School-Tutor...

Neuer Ansatz zum Umschalten der Tab-Leiste mit zwei Auswahlmöglichkeiten in Vue

Problembeschreibung Wenn wir an einem Projekt arb...

So legen Sie den Standardwert für den Datums-/Uhrzeittyp in MySQL fest

Beim Ändern des Standarddatums-/Uhrzeitwerts über...

Codebeispiel für die Verwendung der MySql COALESCE-Funktion

COALESCE ist eine Funktion, die sich nacheinander...

JavaScript zum Implementieren einer dynamischen Digitaluhr

In diesem Artikel finden Sie den spezifischen Cod...

Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs

Wie unten dargestellt: Ersetzen Sie es einfach, w...

Detailliertes Tutorial zum Bereitstellen von Apollo mit Docker

1. Einleitung Ich werde hier nicht näher auf Apol...

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Im folgenden Beispiel ist die Anzeige normal, wenn...

CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung

will-change teilt dem Browser mit, welche Änderun...

So starten Sie mehrere MySQL-Datenbanken auf einem Linux-Host

Lassen Sie uns heute darüber sprechen, wie Sie vi...

Centos8 (Minimalinstallation) Tutorial zur Installation von Python3.8+pip

Nachdem ich die Installation von Python8 minimier...