HTML5-Methode zur domänenübergreifenden Kommunikation durch postMessage_html5-Tutorial-Fähigkeiten

Dieser Artikel stellt hauptsächlich relevante Informationen zur Methode der domänenübergreifenden Kommunikation über postMessage vor. Jetzt kann ich den HTML5-Quellcode als Referenz verwenden. Freunde, die sich für HTML5 interessieren, folgen Sie bitte dem Editor, um einen Blick darauf zu werfen

Kürzlich bin ich bei der Arbeit auf einen Bedarf gestoßen. Das Szenario ist: Die h5-Seite ist als Vorschaumodul in die PC-Seite eingebettet Benutzer auf der PC-Seite Sie können einige Vorgänge ausführen, und dann nimmt h5 reaktionsschnelle Änderungen vor, um den Vorschaueffekt zu erzielen.

Das erste, was mir hier in den Sinn kommt, ist, die h5-Seite mithilfe eines Iframes in die PC-Webseite einzubetten, und dann sendet der PC die geänderten Daten über die postMessage-Methode an den Iframe iframe empfängt die Daten über addEventListener und führt dann reaktionsfähige Änderungen an den Daten durch.

Hier ist eine Zusammenfassung der Verwendung von postMessage. Die API ist sehr einfach:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow ist die Referenz des Zielfensters iframe.contentWindow im aktuellen Szenario;

message ist die gesendete Nachricht. Vor Gecko 6.0 muss die Nachricht string sein, und spätere Versionen können das Objekt< direkt senden 🎜> ohne dass Sie es selbst tun müssen;

gibt den Ursprung des Zielfensters an und sein Wert kann die Zeichenfolge „*“ (für unbegrenzt) oder ein URI sein. Wenn targetOrigineine Nachricht gesendet wird, wenn eines der Protokolle, die Hostadresse oder der Port des Zielfensters nicht mit dem von targetOrigin bereitgestellten Wert übereinstimmt, wird die Nachricht nicht genau gesendet gesendet werden. Bei vertraulichen Daten ist es sehr wichtig, den Ursprung des Zielfensters festzulegen.

Wenn postMessage() aufgerufen wird, wird ein Nachrichtenereignis

an das Zielfenster verteilt. Diese Schnittstelle verfügt über ein Nachrichtenereignis, das mehrere wichtige Attribute aufweist: 1.data: Wie der Name schon sagt, handelt es sich um die übergebene Nachricht

2.source: Das Fensterobjekt, das die Nachricht sendet

3. Ursprung: Die Quelle des Nachrichtenfensters (Protokoll + Host + Portnummer)

Auf diese Weise können wir domänenübergreifende Nachrichten empfangen und auf ähnliche Weise auch Nachrichten zurücksenden.

Der optionale Parameter transfer ist eine Zeichenfolge übertragbarer Objekte, die gleichzeitig mit der Nachricht übergeben wird. Das Eigentum an diesen Objekten wird auf den Empfänger der Nachricht übertragen und der Absender behält nicht länger das Eigentum.

Wenn

dann initialisiert ist, können Sie den Verweis auf den Iframe abrufen und die Nachricht über den folgenden Code senden:

iframe

Im Iframe können Sie die Nachricht empfangen durch den folgenden Code.

// 注意这里不是要获取iframe的dom引用，而是iframe window的引用
const iframe = document.getElementById('myIFrame').contentWindow;
iframe.postMessage('hello world', 'http://yourhost.com');

Beim Empfang können Sie den Nachrichtenursprung nach Bedarf filtern, um XSS-Angriffe zu vermeiden, die durch den Empfang von Nachrichten mit illegalen Domänennamen verursacht werden.

window.addEventListener('message', msgHandler, false);

Zur Code-Wiederverwendung werden schließlich das Senden und Empfangen von Nachrichten in einer Klasse gekapselt und die Nachrichtentyp-API simuliert, was sehr praktisch ist. Der spezifische Code lautet wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

export default class Messager {
    constructor(win, targetOrigin) {
        this.win = win;
        this.targetOrigin = targetOrigin;
        this.actions = {};
        window.addEventListener('message', this.handleMessageListener, false);
    }

    handleMessageListener = event => {
        if (!event.data || !event.data.type) {
            return;
        }
        const type = event.data.type;
        if (!this.actions[type]) {
            return console.warn(`${type}: missing listener`);
        }
        this.actions[type](event.data.value);
    }

    on = (type, cb) => {
        this.actions[type] = cb;
        return this;
    }

    emit = (type, value) => {
        this.win.postMessage({
            type, value
        }, this.targetOrigin);
        return this;
    }

    destroy() {
        window.removeEventListener('message', this.handleMessageListener);
    }
}

Verwandte Empfehlungen:

HTML5 öffnet die mobile Code-Scanfunktion und ihre Vor- und Nachteile_HTML5-Tutorial-Fähigkeiten

Detaillierte Einführung der postMessage-API in H5 mit Bildern und Texten

Verwendung von postMessage in HTML5 zur domänenübergreifenden Implementierung von POST in Ajax

Das obige ist der detaillierte Inhalt vonHTML5-Methode zur domänenübergreifenden Kommunikation durch postMessage_html5-Tutorial-Fähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!