HTML5 actual combat and analysis of cross-document messaging (iframe transfer of information)_html/css_WEB-ITnose

Transmitting messages between pages from different domain names is generally referred to as cross-document messaging, or XDM for short. For example, a page in the www.leemagnum.com domain communicates with a page in the http://blog.csdn.net/lee_magnum domain located in an inline frame. Before the advent of the XDM mechanism, it would have taken a long time to implement this kind of communication without any stress. XDM standardizes this mechanism, allowing us to achieve cross-document communication securely and simply.

The core of XDM is the postMessage() method. For XDM, "another place" refers to the iframe tag included in the current page, or the window that pops up from the current page.

The postMessage() method receives two parameters: a message and a string indicating the domain name from which the message is accepted. The second parameter is very important to ensure secure communication and prevents the browser from sending messages to unsafe places. A small example is as follows

HTML code

JavaScript code

//Get the window in the frame var iframeWin = document.getElementById("iframe").contentWindow; alert(iframeWin) // [object window] //Send a message to the frame iframeWin.postMessage("a message", " http://blog.csdn.net/lee_magnum")

The last line of code in the JavaScript code attempts to send a message to the iframe and formulates Documents in the framework must originate from the "http://blog.csdn.net/lee_magnum" domain. If the source matches, the message is delivered to the iframe, otherwise, postMessage() does nothing. This restriction prevents the position in the window from changing in some situations. If the second parameter passed to postMessage() is "*", it means that the message can be sent to documents from any domain.

When an XDM message is received, the message event of the window object will be triggered. This event is triggered asynchronously, so there may be an event delay from sending the message to receiving the message (triggering the message event of the receiving window). After the message event is triggered, the event object passed to the onmessage handler contains the following three important information.

data: the string data passed in as the first parameter of the postMessage() method

origin: the domain where the document sending the message is located, such as "http://blog.csdn.net /lee_magnum"

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

It is very necessary to verify the source of the sending window after receiving the message. Just like specifying a second parameter to the postMessage() method to ensure that the browser does not send the message to an unknown page, checking the source of the message in the onmessage() method handler can 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 message is sent The domain name is a known domain name if(event.origin == "http://blog.csdn.net/lee_magnum"){ //Process the received data processMessage(event.data); //Optional: to the source window Send receipt event.source.postMessage("Received", "http://www.leemagnum.com"); } }, false);

In most cases, Event.Source is just a proxy for the window object, not the actual window object. That is to say, no other information about the window object can be accessed through this event.Source proxy object. The postMessage() method can only be called through the event.Source proxy.

There is another strange thing about XDM. First of all, the first parameter of postMessage() was first implemented as "always a string". But later 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, to be on the safe side, when using the postMessage() method, it is best to only pass strings. If you want to pass in structured data, it is best to call JSON.stringify() on the data to be passed in, pass in the resulting string through the postMessage() method, and then call JSON in the onmessage event handler .parse() method.

Browsers that support XDM include Opera, IE8, Safari 4, Firefox 3.5, Chrome, Webkit for Android and Safari for iOS. For more information about XDM, you can go to the XDM official page for reference. The official page of XDM is http://dev.w3.org/html5/postmsg/

The relevant knowledge of HTML5 actual combat and analysis of cross-document messaging (iframe messaging) is introduced here. For more information about HTML5, please pay attention to the relevant updates of Menglong Station.