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 >

targetOrigin stellt den Ursprung des festgelegten Zielfensters dar und sein Wert kann die Zeichenfolge „*“ (für unbegrenzt) oder ein URI sein. Wenn

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.

Wenn postMessage() aufgerufen wird, wird ein Nachrichtenereignis

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

2.Quelle: das Fensterobjekt, das die Nachricht sendet

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:

Im Iframe können Sie die Nachricht über empfangen 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:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

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:

Zusammenfassung aller Elemente und grundlegende Syntax von H5

So verwenden Sie Video- und Audio-Tags und Fortschrittsbalken in H5

So implementieren Sie die Drag-and-Drop-Funktion in H5

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!