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 Erklärung, wie Sie den Speicherverbrauch in MySql reduzieren können

Vorwort Standardmäßig initialisiert MySQL einen g...

Vue implementiert nahtloses Scrollen von Listen

In diesem Artikelbeispiel wird der spezifische Co...

Nginx+FastDFS zum Erstellen eines Image-Servers

Installationsumgebung Centos Umgebungsabhängigkei...

Zusammenfassung zum Sharding von MySQL-Datenbanken und -Tabellen

Während der Projektentwicklung werden unsere Date...

Detaillierte Erklärung der Funktionsweise der Node.js-Middleware

Inhaltsverzeichnis Was ist Express-Middleware? Vo...

So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts

Ursache So importieren Sie externe Dateien in ein...

So löschen Sie die Validierungsaufforderung bei der Elementformularvalidierung

Inhaltsverzeichnis Problemszenario: Lösung: 1. Üb...

Spezifischer Einsatz von Routing Guards in Vue

Inhaltsverzeichnis 1. Globale Wache 1.1 Globaler ...

Extrahieren Sie bestimmte Dateipfade in Ordnern basierend auf Linux-Befehlen

In letzter Zeit besteht der Bedarf, automatisch n...

Detaillierte Erklärung des JavaScript-Timer-Prinzips

Inhaltsverzeichnis 1. setTimeout()-Timer 2. Stopp...