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

Detaillierte Erläuterung der Angular-Strukturdirektivenmodule und -Stile

Inhaltsverzeichnis 1. Strukturelle Anweisungen Mo...

Detailliertes Tutorial zur Springcloud-Alibaba-Nacos-Linux-Konfiguration

Laden Sie zuerst das komprimierte Nacos-Paket von...

Natives JavaScript zum Erzielen von Folieneffekten

Wenn wir eine Seite erstellen, insbesondere eine ...

Zusammenfassung einiger Vorschläge zum HTML-Code-Schreibstil

Das Protokoll der Ressourcendatei weglassen Es wi...

Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern

Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...

Detaillierter Prozessbericht der Vue2-Initiierungsanfragen mit Axios

Inhaltsverzeichnis Vorwort Axios-Installation und...

Eine kurze Erläuterung der Schriftarteinstellungen in Webseiten

Das Festlegen der Schriftart für die gesamte Site...

Richtige Schritte zur Installation von Nginx unter Linux

Vorwort Wenn Sie wie ich ein fleißiger Java-Backe...

Erweiterte MySQL-Datenbankabfrage und Mehrtabellenabfrage

MySQL-Abfrage für mehrere Tabellen Hinzufügen ein...