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

Spezialeffekte der Studiennotizen von Bootstrap 3.0 (Anzeigen und Ausblenden, Entfernen des Schwebezustands, Schaltfläche „Schließen“ usw.)

Artikel

Detailliertes Beispiel der Lesegeschwindigkeit von JS-Objekten

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

Spezialeffekte der Studiennotizen von Bootstrap 3.0 (Anzeigen und Ausblenden, Entfernen des Schwebezustands, Schaltfläche „Schließen“ usw.)

Detailliertes Beispiel der Lesegeschwindigkeit von JS-Objekten

Detaillierte Erklärung zur Verwendung des MySQL-Sicherungsskripts mysqldump

Die vernachlässigten Spezialeffekte von META-Tags (Seitenübergangseffekte)

10 Dinge, die exzellente Webentwickler wissen müssen, um ihre Entwicklungsfähigkeiten zu verbessern

So installieren Sie Grafana und fügen Influxdb-Überwachung unter Linux hinzu

Prinzip des MySQL-Indexfehlers

Verwenden Sie Elasticsearch, um Indexdaten regelmäßig zu löschen

Detaillierte Erklärung der Verwendung von publicPath in Webpack

Beispielcode für die Vue-Bildzuschneidekomponente

Artikel empfehlen

So installieren und implementieren Sie Zabbix 5.0 für Nginx

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0

Lösen Sie das Problem „Rand: oberer Kollaps“ in CCS

So installieren Sie Graphviz und beginnen mit dem Tutorial unter Windows

Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)

Detaillierte Erklärung der Lösung für das Problem, dass FTP keine Verbindung zum Baota Linux-Panel herstellen kann

Stellen Sie Ihre Website automatisch auf den IE7-Kompatibilitätsmodus ein, wenn Sie mit IE8 surfen

Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.

Das vergessene Button-Tag

Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe

Erfahrung im Selbststudium von CSS-Optimierungsfähigkeiten

HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche

CSS erzielt farbenfrohe und intelligente Schatteneffekte

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.21 winx64