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

So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms

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

So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms

Beispiele für die korrekte Verwendung von Karten in WeChat-Miniprogrammen

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Häufige Tomcat-Ausnahmen und Lösungscodebeispiele

Detaillierte Erklärung des daily_routine Beispielcodes in Linux

So implementieren Sie „insert if none“ und „update if yes“ in MySql

Mehrere Möglichkeiten zur Implementierung bildadaptiver Container mit CSS (Zusammenfassung)

CSS-Eingabe[Typ=Datei]-Stilverschönerung (Eingabe-Upload-Dateistil)

Detaillierte Erläuterung der Überwachung des Jenkins-Prozesses basierend auf Zabbix

Bootstrap realisiert den Karusselleffekt

Artikel empfehlen

CSS-Beispielcode zum Festlegen des Bildlaufleistenstils

Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten

Detaillierte Schritte zur Installation von Mysql5.7.19 mit yum auf Centos7

So legen Sie das Breitenattribut auf den Stil des Span-Tags fest

Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch

Implementierung der Einstellungen für virtuellen Nginx-Host basierend auf Domänenname, Port und unterschiedlicher IP

Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV

Vorbereitung der Vue Element-Front-End-Anwendungsentwicklung für die Entwicklungsumgebung

So verwenden Sie libudev in Linux, um die VID und PID eines USB-Geräts abzurufen

Native JS implementiert einen sehr gut aussehenden Zähler

Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang

Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode

So führen Sie den Top-Befehl im Batchmodus aus

Detaillierte Analyse des Diff-Algorithmus in React

Bootstrap 3.0-Lernunterlagen für Anfänger