Details about HTML5 window. postMessage and cross-origin and postmessage

Details about HTML5 window. postMessage and cross-origin and postmessage

In the previous article, we talked about the same-origin browser policy, that is, to prevent pages in different domains from accessing each other's methods and attributes. We also elaborated on the solution to the Cross-origin problem of the same-origin policy: subdomain proxy, JSONP, CORS. This article will elaborate on HTML5 window. postMessage. With postMessage API, documents can implement cross-origin communication in a secure and controllable manner, and third-party JavaScript code can also communicate with external documents loaded in iframe.

HTML5 window. postMessage API

HTML5 window. postMessage is a secure, event-based message API.

PostMessage

Call the postMessage method in the source window of the message to be sent to send the message.

Source window

The source window can be a global window object or a window of the following types:

Iframe in the document window:

var iframe = document.getElementById('my-iframe');    var win = iframe.documentWindow;

Pop-up window opened by JavaScript:

var win = window.open();

Parent window of the current document window:

var win = window.parent;

Open the current document window:

var win = window.opener();

After finding the source window object, you can call the postMessage API to send messages to the target window:

``win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');```

The postMessage function receives two parameters: the first is the message to be sent, and the second is the source of the source window.

Note: The message can be received only when the source value of the target window matches the value of the Source parameter passed in the postMessage function.

Receive postMessage messages

To receive a message sent from the source window through postMessage, you only need to register the message event in the target window and bind the event listening function to obtain the message in the function parameters.

Window. onload = function () {var text = document. getElementById ('txt '); function receiveMsg (e) {console. log ("Got a message! "); Console. log ("nMessage:" + e. data); console. log ("nOrigin:" + e. origin); // console. log ("Source:" + e. source); text. innerHTML = "Got a message! <Br> "+" Message: "+ e. data + "<br> Origin:" + e. origin;} if (window. addEventListener) {// registers message events for the window and binds the listener function window. addEventListener ('message', receiveMsg, false);} else {window. attachEvent ('message', receiveMsg );}};

The message Event listening function receives a parameter, the Event object instance, which has three attributes:

1. Specific messages sent by data
2. Origin send message source
3. Source refers to the window object in the message sending window

Description

1. You can set the second parameter of the postMessage function to *. When a cross-origin message is sent, the check on the source of the sent message is skipped.
2. PostMessage can only send string information.

Instance

Source window

<! DOCTYPE html> 
Target window win.html
<! DOCTYPE html> 
Review
Through this article, I learned how to use the postMessage API of HTML5 to communicate between windows, and how to implement cross-origin communication. modern browsers basically support postMessage, some old-fashioned browsers such as IE7-can use some alternative solutions for data communication, such as window. name, url query characters, and hash segments.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.