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.

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

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

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

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:

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

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!