Shulou(Shulou.com)06/03 Report--

Editor to share with you how html5 carries out cross-domain communication through postMessage. I hope you will get something after reading this article. Let's discuss it together.

Recently encountered a demand in the work, the scene is: H6 page as a preview module embedded in the pc page, users can do some operations in the pc page, and then H6 make responsive changes to achieve the preview effect.

The first thought here is to embed the H6 page into the pc page with iframe, and then pc uses the postMessage method to send the changed data to the h6 embedded in iframe,iframe to receive the data through addEventListener, and then make responsive changes to the data.

Here's a summary of the use of postMessage. Api is simple:

OtherWindow.postMessage (message, targetOrigin, [transfer])

OtherWindow is a reference to the target window, which is iframe.contentWindow in the current scene

Message is the message sent. Before Gecko 6.0, the message must be a string, while later versions can send objects directly without serializing themselves.

TargetOrigin represents the origin of the target window, and its value can be the string "*" (for unlimited) or a URI. When sending a message, if any of the protocol, host address, or port of the destination window does not match the value provided by targetOrigin, the message will not be sent; only if the three match exactly will the message be sent. For confidential data, it is very important to set the target window origin

When postMessage () is called, a message event is distributed to the target window. The interface has a message event, which has several important properties:

1.data: as the name implies, it is the passed message

2.source: the window object that sends the message

3.origin: the source of the message window (protocol + host + port number)

In this way, we can receive cross-domain messages, and we can also send messages back in a similar way.

The optional parameter transfer is a string of Transferable objects passed with message at the same time. Ownership of these objects will be transferred to the recipient of the message, while the sender will no longer retain ownership.

Then, when the iframe is initialized, you can get a reference to the iframe and send a message with the following code:

/ / Note that the dom reference of iframe is not obtained here, but the reference of iframe window const iframe = document.getElementById ('myIFrame') .contentWindow;iframe.postMessage (' hello world', 'http://yourhost.com');)

In iframe, you can receive the message through the following code.

Window.addEventListener ('message', msgHandler, false)

When receiving, you can filter the message source origin as needed to avoid xss attacks caused by receiving messages from illegal domain names.

Finally, for code reuse, message sending and receiving are encapsulated into a class, and api of message type is simulated, which is very convenient to use. The specific code is as follows:

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) }} after reading this article, I believe you have a certain understanding of "how html5 communicates across domains through postMessage". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.