Beispiel für die Implementierung bidirektionaler Nachrichten zwischen übergeordneten und untergeordneten Seiten in einem HTML-Iframe

Eines Tages stellte der Leiter die Anforderung, ein Iframe in die Hauptseite einzubetten und Nachrichten zwischen den übergeordneten und untergeordneten Seiten in beide Richtungen zu senden. Dann habe ich eine Lösung vorgeschlagen: postMessage

Wissenstheoretische Vorbereitung:

Mit der Methode „postMessage“ können Skripts aus verschiedenen Quellen in begrenztem Umfang asynchron kommunizieren und Nachrichten dokumentenübergreifend, in mehreren Fenstern und domänenübergreifend übermitteln.

Grammatik:

otherWindow.postMessage(Nachricht, Zielursprung, [Übertragung]);

otherWindow: Ein Verweis auf ein anderes Fenster, beispielsweise das contentWindow eines Iframes, das durch Ausführen von window.open zurückgegebene Fensterobjekt oder benannte oder numerisch indizierte window.frames.
Nachricht: Daten, die an andere Fenster gesendet werden sollen.
targetOrigin: Gibt an, welche Fenster Nachrichtenereignisse empfangen können. Der Wert kann die Zeichenfolge „*“ sein, um keine Einschränkung anzuzeigen, oder eine URI.
transfer: ist eine Zeichenfolge übertragbarer Objekte, die zusammen mit der Nachricht weitergegeben werden. Der Besitz dieser Objekte wird auf den Empfänger der Nachricht übertragen und der Absender behält nicht länger den Besitz.

Wenn die Methode postMessage aufgerufen wird, wird eine MessageEvent-Nachricht an das Zielfenster gesendet, nachdem alle Seitenskripte ausgeführt wurden. Die MessageEvent-Nachricht hat vier Eigenschaften, die beachtet werden müssen:

Typ: Gibt den Typ der Nachricht an
data: der erste Parameter von postMessage
Herkunft: Gibt die Quelle des Fensters an, das die Methode postMessage aufruft
Quelle: zeichnet das Fensterobjekt auf, das die Methode „postMessage“ aufruft

Der Betriebsablauf ist wie folgt:

1. Bereiten Sie zwei Seiten vor

http://a.com/main.html Hauptseite
http://b.com/iframepage.html Verschachtelte Seite

Haupt-Datei.html

<!DOCTYPE html> 
<html>
<Kopf>
<meta charset="utf-8">
<title>iframe+postMessage Hauptseite für domänenübergreifende Kommunikation</title>
</Kopf>
<Text>
    <h1>Hauptseite</h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2>Bereich zum Empfangen von Nachrichten auf der Hauptseite</h2>
        <span id="Nachricht"></span>
    </div>
</body> 
</html>

iframeseite.html

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>iframe+postMessage-Unterseite für domänenübergreifende Kommunikation</title>
</Kopf>
<Text>
    <h2>Unterseiten</h2>
    <div>
        <h3>Nachrichtenempfangsbereich</h3>
        <span id="Nachricht"></span>
    </div>
</body>
</html>

2. Eltern senden Nachricht an Kind

Haupt-Datei.html

<Skript>
    fenster.onload = funktion(){
        document.getElementById('Kind')
         .contentWindow.postMessage("Hauptseitennachricht", 
                "http://b.com/iframepage.html")
    }
</Skript>

Beachten:

Die Nachricht muss nach dem Laden der Seite gesendet werden, sonst wird ein Fehler gemeldet, weil das Iframe nicht geladen wurde.

„postMessage“ konnte auf „DOMWindow“ nicht ausgeführt werden

Unterseite empfängt Nachricht:

iframeseite.html

<Skript>
    window.addEventListener('Nachricht',Funktion(Ereignis){
        console.log(Ereignis);
        document.getElementById('message').innerHTML = "Empfangen" 
            + event.origin + "Nachricht: " + event.data;
    }, FALSCH);
</Skript>

An dieser Stelle können Sie erkennen, dass die Seite in der Unterseite des Iframes ausgedruckt wird.

Empfangene Nachricht von http://a.com: Hauptseite-Nachricht`

Und die Konsole druckt das MessageEvent-Objekt.

3. Das Kind sendet eine Nachricht an die Eltern

Die untergeordnete Seite antwortet der übergeordneten Seite, nachdem sie die Nachricht erhalten hat

iframeseite.html

<Skript>
    window.addEventListener('Nachricht',Funktion(Ereignis){
        console.log(Ereignis);
        document.getElementById('message').innerHTML = "Empfangen" 
            + event.origin + "Nachricht: " + event.data;
        top.postMessage("Unterseitennachricht empfangen", 'http://a.com/main.html')
    }, FALSCH);
</Skript>

Die übergeordnete Seite empfängt die Nachricht und zeigt Folgendes an:

window.addEventListener('Nachricht', Funktion(Ereignis){
    document.getElementById('message').innerHTML = "Empfangen" 
        + event.origin + "Nachricht: " + event.data;
}, FALSCH);

4. Code vervollständigen

Haupt-Datei.html

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>iframe+postMessage Hauptseite für domänenübergreifende Kommunikation</title>
</Kopf>
<Text>
    <h1>Hauptseite</h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2>Bereich zum Empfangen von Nachrichten auf der Hauptseite</h2>
        <span id="Nachricht"></span>
    </div>
</body> 
<Skript>
    fenster.onload = funktion(){
        document.getElementById('Kind')
         .contentWindow.postMessage("Hauptseitennachricht", 
            "http://b.com/iframepage.html")
    }
    window.addEventListener('Nachricht', Funktion(Ereignis){
        document.getElementById('message').innerHTML = "Empfangen"
         + event.origin + "Nachricht: " + event.data;
    }, FALSCH);
</Skript>
</html>

iframeseite.html

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>iframe+postMessage-Unterseite für domänenübergreifende Kommunikation</title>
</Kopf>
<Text>
    <h2>Unterseiten</h2>
    <div>
        <h3>Nachrichtenempfangsbereich</h3>
        <span id="Nachricht"></span>
    </div>
</body>
<Skript>
    window.addEventListener('Nachricht',Funktion(Ereignis){
        wenn(Fenster.übergeordnet !== Ereignis.Quelle){return}
        console.log(Ereignis);
        document.getElementById('message').innerHTML = "Empfangen" 
            + event.origin + "Nachricht: " + event.data;
        top.postMessage("Unterseitennachricht empfangen", 'http://a.com/main.html')
    }, FALSCH);
</Skript>
</html>

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel für bidirektionale Nachrichtenübermittlung zwischen HTML-Eltern- und -Kindseiten-Iframes. Weitere relevante Inhalte zu bidirektionaler Nachrichtenübermittlung zwischen HTML-Eltern- und -Kindseiten-Iframes finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Einführung in die Verwendung von Unicode-Zeichen in Webseiten (&#, \u usw.)

>>: CSS erzielt farbenfrohe und intelligente Schatteneffekte

Detaillierte Analyse von MySQL-Datenbanktransaktionen und -Sperren

Beispiel für die Implementierung bidirektionaler Nachrichten zwischen übergeordneten und untergeordneten Seiten in einem HTML-Iframe

Detaillierte Analyse von MySQL-Datenbanktransaktionen und -Sperren

Detaillierte Erklärung zur Verbindung von Java mit Mysql Version 8.0.18

Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle

Implementierungsbeispiel eines React-Projekts von der Neuerstellung bis zur Bereitstellung

Acht Beispiele, wie Vue Komponentenkommunikation implementiert

So installieren Sie MySQL 8.0.17 und konfigurieren den Fernzugriff

Detailliertes Tutorial zur Installation von MySQL 5.7 auf RedHat 6.5

Lösung für MySql-Fehler 1698 (28000)

So ändern Sie MySQL-Berechtigungen, um Hosts den Zugriff zu ermöglichen

Detailliertes Beispiel des Kettenprogrammierstils von jQuery

Artikel empfehlen

Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt

Mehrere wichtige MySQL-Variablen

Verwendung von HTML zur Implementierung eines Betrugsschemas auf einer Abstimmungswebsite, das IP einschränkt

vue+element-ui implementiert die Kopfnavigationsleistenkomponente

Eine kurze Diskussion über den MySQL B-Tree-Index und die Indexoptimierungszusammenfassung

Lösung für das Problem des unzureichenden Speicherressourcenpools des Docker-Servers

Detaillierte Erklärung der Linux-CPU-Last und CPU-Auslastung

So migrieren Sie lokales MySQL in eine Serverdatenbank

Leistung des Node+Express-Testservers

Tutorial zur Installation von MYSQL8.X auf Centos

So exportieren Sie die MySQL-Tabellenstruktur nach Excel

Vue implementiert Mehrfachauswahl im unteren Popup-Fenster

Umfassende Analyse des MySql-Master-Slave-Replikationsmechanismus

JavaScript-Array-Deduplizierungslösung

Über den Lösungseintrag zur fehlenden Reaktion der Seite bei Verwendung von window.print() in React