HTML5 method for cross-domain communication

This article shared everyone about the content of HTML5 for cross-domain communication. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

The recent work encounters a demand, the scene is: H6 is embedded in the PC page as the preview module, and the user can do some operations in the PC page, then H6 makes a response change to achieve preview Effect.

Here, it is first thought that the H6 page is embedded in the PC web page, and then the PC is sent to iframe through the PostMessage method. The IFRAME embedded H6 receives data through the AddeventListener, and then do data Responsive changes.

He summarizes the use of PostMessage, the API is simple:

OtherWindow.PostMessage (Message, Targetorigin, [Transfer]);
OtherWindow is a reference to the target window. Under the current scene is iframe.contentWindow;

Message is the message, before Gecko 6.0, the message must be a string, and the subsequent version can do it Directly send objects without performing serialization;

Targetorigin indicates the origin of the setting target window, and its value can be a string “*” (indicating unlimited) or a URI. When sending a message, if the protocol of the target window, the host address, or port of the three do not match the value provided by Targetorigin, then the message will not be sent; only the three are fully matched, the message will be sent. For confidential data, setting the target window Origin is very important;

When postmessage () is called, a message event will be distributed to the target window. This interface has a Message event that there are several important properties:

1.Data: As the name suggests,Passage

2. Source: Send a message window object

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

This can receive a cross-domain message We can also send a message to go back, the method is similar.

Optional parameter TRANSFER is a series of transferable objects that are passed at the same time. These objects’ ownership will be transferred to the message receiver, and the sender will no longer be ownership.

After IFRAME is initialized, it can be obtained by the following code to get the reference and send message:

// Note that this is not to get the IFRAME DOM reference, It is the reference for iframe window const.ndwindow; frd.postMessage (‘Hello World’, ‘’);
   In IFRAME, the message can be received by the following code. 
WINDOW.ADDEVENTLISTENER (‘Message’, MSGHandler, false);

When receiving, the message source origin can be done as needed. Filter, avoiding the XSS attack caused by the messages that receive illegal domain names.
 Finally, for the code multiplex, the message is transmitted and received into a class, and the API of the message type is simulated, which is very convenient to use. The specific code is as follows:   Export Default Class Messager {Constructor (Win, Targetorigin) { = win; this.targetorigin = targetorigin; this.Addes = {}; window.addeventListener ('Message', this.handleMessagelistener, false);} HandleMessageListener = Event => {if (! Event.Data ||! Event. Data.Type) {Return;} const 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.postMessage ({ TYPE, VALUE}, this.targetorigin; Return this;} destroy () {WINDOW.RemoveEventListener ('Message', this.handleMessageListener);}} 

Thank you for reading! Regarding the method of HTML5 for cross-domain communication, you can share it here, I hope that the above can help everyone, let everyone learn more. If you feel that the article is good, you can share it out to let more people see it!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment