HTML5-domänenübergreifende Kommunikationsmethode über postMessage

Die h5-Seite ist als Vorschaumodul in die PC-Seite eingebettet. Der Benutzer kann einige Vorgänge auf der PC-Seite ausführen, woraufhin die h5-Seite entsprechende Änderungen vornimmt, 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. Das im Iframe eingebettete h5 empfängt die Daten über addEventListener und nimmt dann entsprechende Änderungen an den Daten vor. In diesem Artikel erhalten Sie eine detaillierte Einführung in die Methode der domänenübergreifenden Kommunikation in HTML5 über postMessage.

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

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

otherWindow ist eine Referenz auf das Zielfenster in der aktuellen Szene Das Folgende ist iframe.contentWindow;

message ist die gesendete Nachricht. Vor Gecko 6.0 muss die Nachricht eine Zeichenfolge sein, und spätere Versionen können Objekte direkt senden, ohne sie zu serialisieren selbst;

targetOrigin gibt den Ursprung des Zielfensters an und sein Wert kann die Zeichenfolge „*“ (für unbegrenzt) oder ein URI sein. Wenn beim Senden einer Nachricht eines der Protokolle, Hostadressen oder Ports des Zielfensters nicht mit dem von targetOrigin bereitgestellten Wert übereinstimmt, wird die Nachricht nicht gesendet, nur wenn die drei vollständig übereinstimmen, wird die Nachricht gesendet. 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 iframe dann initialisiert ist, können Sie den Verweis auf den Iframe abrufen und die Nachricht über den folgenden Code senden:

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

in In einem Iframe kann die Nachricht über den folgenden Code empfangen werden.

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

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

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:

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);
    }
}

Der obige Inhalt zeigt, wie HTML5 postMessage für die domänenübergreifende Kommunikation verwendet.

Verwandte Empfehlungen:

Teilen der grundlegenden Verwendung der postMessage-API in HTML5

Verwenden von postMessage in HTML5 zum Übertragen von Daten zwischen zwei Webseiten

PostMessage in HTML5 implementiert domänenübergreifende POST-Probleme in Ajax

Das obige ist der detaillierte Inhalt vonHTML5-domänenübergreifende Kommunikationsmethode über postMessage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!