So führen Sie eine domänenübergreifende Kommunikation in HTML5 durch

Dieses Mal zeige ich Ihnen, wie Sie HTML5 für die domänenübergreifende Kommunikation verwenden und wie Sie h5 für die domänenübergreifende Kommunikation verwenden. Was sind die Vorsichtsmaßnahmen für die domänenübergreifende Kommunikation in h5? Hier sind praktische Fälle, werfen wir einen Blick darauf.

Ich bin kürzlich auf einen Bedarf bei der Arbeit gestoßen. Das Szenario ist: Die h5-Seite ist als Vorschaumodul in die PC-Seite eingebettet, und dann kann die h5-Seite verwendet werden Seite nimmt reaktionsfähige Änderungen vor.

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, das iframe ist. contentWindow im aktuellen Szenario;

Nachricht ist die gesendete Nachricht. Vor Gecko 6.0 muss die Nachricht eine Zeichenfolge sein, und spätere Versionen können das Objekt direkt senden, ohne es selbst zu serialisieren >

eine 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.Daten: Wie der Name schon sagt, handelt es sich um die übergebene Nachricht

3. Herkunft: 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 der 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');

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 Lektüre:

Das obige ist der detaillierte Inhalt vonSo führen Sie eine domänenübergreifende Kommunikation in HTML5 durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!