Cross-page message transmission in Html5 and cross-page message in html5

Cross-page message transmission in Html5 and cross-page message in html5

1. To accept messages sent from other windows, you must monitor the message events of window objects.

Window. addEventListener ("message", function () {}, false );

Use the postMessage method of the window object to send messages to other windows,

Otherwindow. postMessage (message, targetOrigin );

Parameter: message is the message text sent, but it can also be any javascript Object;

The second parameter is the URL of the message receiving Object window.

OtherWindow is the reference of the window object to be sent. You can return this object through window. open, or return the window object of a single frame by setting the sequence number or name for the window. frames array.

Create two projects: s1 and s2

S1 and s2 send data to each other:

Index.html in s1:

<! DOCTYPE html> 
1.html in s2
<! DOCTYPE html> 
Result:

Origin attribute: This is the sender meta. The sender Meta is not the same as the url of the website. The original sender only includes the domain name and port number,
In order not to receive messages maliciously sent from other sources, it is best to check the sending source.
Source attribute: obtains the window object for message sending.
 
The message transmission between webpage documents and webpage documents is not only for text messages,
If the Json object stringify method is used to convert the javascript Object into text, use the parse method of the Json object
To restore a javascript Object, any javascript Object can be transmitted between the webpage document and the document, between the port and the port, and between the domain and the domain.