Ich bin kürzlich bei der Arbeit auf einen Bedarf gestoßen. Das Szenario ist: Die h5-Seite ist als Vorschaumodul in die PC-Seite eingebettet. Anschließend kann die h5-Seite entsprechende Änderungen vornehmen, 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.
Hier ist eine Zusammenfassung der Verwendung von postMessage. Die API ist sehr einfach:
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow ist ein Verweis auf das Zielfenster, das im aktuellen Szenario iframe.contentWindow ist.
message ist die gesendete Nachricht. Vor Gecko 6.0 muss die Nachricht eine Zeichenfolge sein, spätere Versionen können das Objekt jedoch direkt senden, ohne es selbst zu serialisieren.
targetOrigin stellt den Ursprung des Zielfensters dar und sein Wert kann eine 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 nur dann gesendet, wenn die drei vollständig übereinstimmen. Bei vertraulichen Daten ist es sehr wichtig, den Ursprung des Zielfensters festzulegen;
Wenn postMessage() aufgerufen wird, wird ein Nachrichtenereignis an das Zielfenster gesendet. Diese Schnittstelle verfügt über ein Nachrichtenereignis, das mehrere wichtige Eigenschaften hat:
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 zusammen mit der Nachricht übergeben werden. Das Eigentum an diesen Objekten wird an 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:
// Beachten Sie, dass dies nicht dazu dient, die Dom-Referenz des Iframes abzurufen, sondern die Referenz des Iframe-Fensters const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /yourhost.com' );In einem Iframe kann die Nachricht über den folgenden Code empfangen werden.
window.addEventListener('message', msgHandler, false);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.
Schließlich werden für die Wiederverwendung von Code 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 { constructionor(win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin = {}; handleMessageListener = event => { if (!event.data || !event.data.type) { return; const type = event.data.type; (!this.actions[type]) { return console.warn(`${type}: fehlender Listener`); } this.actions[type](event.data.value } on = (type, cb) = > { this.actions[type] = cb; return this; window.removeEventListener('message', this.handleMessageListener); }}Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.