html5 cross-document message transmission example discussion_html5 tutorial skills

WBOY

Release： 2016-05-16 15:49:49

Original

1351 people have browsed it

Monitor the message event of the window object

Copy the code

The code is as follows:

window .addEventListener("message", function(event) {
// handler code
}, false);

Use the postMessage() method of the window object to send messages to other windows , the method is defined as follows:

Copy code

The code is as follows:

otherwindow. postMessage(message, targetOrigin);

This method uses two parameters: the first parameter is the text of the message sent, but it can also be any JavaScript object (converting the object to text through JSON); The second parameter is the URL address of the object window that receives the message. You can use the wildcard "*" in the URL address string to specify all addresses, but it is recommended to use an accurate URL address. otherwindow is to send a reference to the window object. You can return the object through the window.open() method, or return the window object attributed to a single frame by specifying the serial number (index) or name in the window.frames array.
Example

Copy code

The code is as follows:

Cross-Document Messaging Example Master Document

< body>

Cross-domain communication example

sub The code in the page is as follows:

Copy the code The code is as follows:

This is the content in the iframe.

•Pass Monitor the message event of the window object and receive messages.
•By accessing the origin attribute of the message event, you can get the sending source of the message (in this example, the sending source of the main page is "http://Lulingniu", and the sending source of the sub-page is "http://www.blue" -butterfly.net"). Note: The sending source and the URL address of the website are not the same concept. The sending source only includes the domain name and port number. In order to avoid receiving messages maliciously sent by other sources, it is best to check the sending source.
• By accessing the data attribute of the message event, you can get the message content (can be any JavaScript object, using JSON).
•Use the postMessage() method to send messages.
•By accessing the source attribute of the message event, you can obtain the proxy object of the window from which the message is sent.