HTML5 practice and analysis-Cross-document message transmission (iframe transfer information)

Messages transmitted between pages of different domain names are generally referred to as cross-document message transmission (XDM. For example, the page in www.leemagnum.com communicates with the page in the http://blog.csdn.net/lee_magnumdomain name in an embedded framework. Before the emergence of the XDM mechanism, it takes a long time to implement such communication without any pressure. XDM standardizes this mechanism, allowing us to implement secure and simple cross-document communication.

The core of XDM is the postMessage () method. For XDM, "another place" refers to the iframe tag contained on the current page or a window popped up on the current page.

The postMessage () method receives two parameters: one message and one string indicating the domain name from which the message is accepted. The second parameter is very important for secure communication. It can prevent the browser from sending messages to insecure places. Example

　　HTML code

<iframe id="iframe" src="http://blog.csdn.net/lee_magnum" frameborder="0"></iframe>

　　JavaScript code

// Obtain windowvar iframeWin = document in the framework. getElementById ("iframe "). contentWindow; alert (iframeWin) // [object window] // send the message iframeWin to the framework. postMessage ("one message", "http://blog.csdn.net/lee_magnum ")

The last line of code in JavaScript code tries to send a message to the embedded framework, and the documentation in the framework must come from the "http://blog.csdn.net/lee_magnum#domain. If the source matches, the message is transmitted to the embedded framework. Otherwise, postMessage () does nothing. This restriction can avoid changing the position in the window in some situations. If the second parameter sent to postMessage () is "*", the message can be sent to documents from any domain.

When an XDM message is received, the message event of the window object is triggered. This event is triggered asynchronously. Therefore, the latency from sending a message to receiving a message (triggering a message event in the Receiving Window) may occur after an event. After a message event is triggered, the event object passed to the onmessage handler contains the following three important information.

　　Data: String data passed as the first parameter of the postMessage () method

　　Origin: The domain where the document sending the message is located, for example, "http://blog.csdn.net/lee_magnum"

　　Source: The window object proxy of the document sending the message. This proxy object is mainly used to call the postMessage () method in the window that sends the previous message. If the message sending window comes from the same domain name, this object is window.

It is necessary to verify the source of the sending window after receiving the message. Just like specifying the second parameter for the postMessage () method to ensure that the browser does not send the message to an unknown page () the method handler detects the message source to ensure that the incoming message comes from a known page. The basic detection mode is as follows:

　　JavaScript code

Window. addEventListener ('message', function (event) {// ensure that the domain name for sending the message is a known domain name if (event. origin = "http://blog.csdn.net/lee_magnum") {// process received data processMessage (event. data); // Optional: Send a receipt event to the source window. source. postMessage ("received", "http://www.leemagnum.com") ;}}, false );

Event. Source is only the proxy of the window object in most cases, not the actual window object. That is to say, you cannot access any other information of the window object through this event. Source proxy object. The postMessage () method can only be called through the event. Source agent.

There is another strange thing about XDM. First, the first parameter of postMessage () was first implemented as "always a string. However, the definition of this parameter was changed to allow any data structure to be passed in. But not all browsers have implemented this change. Therefore, when using the postMessage () method, it is best to pass only strings. If you want to input structured data, you 'd better call JSON on the data to be imported first. stringify (), pass in the string through the postMessage () method, and then call json in the onmessage event handler. parse () method.

Browsers supporting XDM include Opera, IE8 +, Safari 4 +, Firefox 3.5 +, Chrome, Android Webkit, and iOS Safari. For more information about XDM, go to the XDM official page. XDM official page is http://dev.w3.org/html5/postmsg/

Introduction to the Cross-document message transmission (iframe transfer information) in HTML5 practice and Analysis, for more HTML5-related things, please follow the updates related to Menglong xiaostation.