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

Beispielanalyse der Verwendung des neuen JSON-Feldtyps in MySQL 5.7

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

Beispielanalyse der Verwendung des neuen JSON-Feldtyps in MySQL 5.7

Eine einfache Methode zum regelmäßigen Löschen abgelaufener Datensätze in MySQL

Detaillierte Erläuterung der Docker-Container-Cross-Host-Multi-Netzwerksegment-Kommunikationslösung

Eine kurze Analyse, ob die Verwendung von iframe zum Aufrufen einer Seite die Seite zwischenspeichert

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.16 (Ubuntu 16.04)

IDEA-Konfigurationsprozess von Docker

Eine kurze Erläuterung des Unterschieds zwischen schreibgeschützten und deaktivierten Eingabeattributen in HTML

Detaillierte Erklärung, wie Sie das automatische Beenden des Docker-Containers verhindern können

Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion

Detailliertes Tutorial zum Bereitstellen von Jenkins basierend auf Docker

Artikel empfehlen

Implementierungscode für unendliches Scrollen mit n Containerelementen

Zwei Möglichkeiten zum Konfigurieren globaler Vue-Methoden

Tutorial zur Installation des AutoFs-Mount-Dienstes unter Linux

JavaScript-Grundlagen für Schleife und Array

Implementierung der Benutzerregistrierungsfunktion mit js

GDB-Debugging, MySQL-Kompilierung und Installation des tatsächlichen Kampfquellcodes

Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft

So verwenden Sie uni-app, um Schaltflächen und Suchfelder in der oberen Navigationsleiste anzuzeigen

SMS-Bestätigungscode-Anmeldefunktion basierend auf Antd Pro (Prozessanalyse)

Wie man hochwertige Webseiten gestaltet Erfahrung in der Gestaltung hochwertiger Webseiten (Bilder und Text)

So unterstützen Sie ApacheBench mehrere URLs

Detaillierte Erklärung, wie Sie die Fallstricke beim Ersetzen von logischem SQL in MySQL vermeiden können

Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen

Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)

MySQL-Batch entfernt Leerzeichen in einem bestimmten Feld