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 des Vue Notepad-Beispiels

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung, wie Angular mit unerwarteten Ausnahmefehlern umgeht

Vorne geschrieben Unabhängig davon, wie gut der C...

Beispieloperation für die Summe des Mysql-Varchar-Typs

Einige Freunde haben beim Erlernen von Datenbanke...

MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045

MySQL-Passwort ist korrekt, aber keine lokale Anm...

HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

Inhaltsverzeichnis Erster Blick auf die Wirkung: ...

Detaillierte Codebeispiele zu sieben Methoden zur vertikalen Zentrierung mit CSS

Wenn wir ein Layout bearbeiten, verwenden wir nor...

Beispiel für einen reinen CSS3-Mindmap-Stil

Mindmap Er sieht wahrscheinlich so aus: Die meist...

Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA

Schauen wir uns zunächst meine grundlegende Entwi...

MySQL wählt den passenden Datentyp für die ID

Inhaltsverzeichnis Zusammenfassung der Distribute...

Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels

Tabellenfelder hinzufügen alter table table1 add ...