HTML5 practice and analysis of cross-document messaging (iframe messaging)

　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 domain www.leemagnum.com communicates with a page in the domain name //m.sbmmt.com/ 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 on 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

//获取框架中的window
var iframeWin = document.getElementById("iframe").contentWindow;
alert(iframeWin) // [object window]

//向框架中发送消息
iframeWin.postMessage("一个消息", "http://blog.csdn.net/lee_magnum")

The last line of code in the JavaScript code attempts to send a message to the inline frame and specifies that the document in the frame must originate from "//m.sbmmt.com/ "area. 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 "//m.sbmmt.com/"

　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){
	//确保发送消息的域名是已知的域名
	if(event.origin == "http://blog.csdn.net/lee_magnum"){
		//处理接收到的数据
		processMessage(event.data);
		//可选：向来源窗口发送回执
		event.source.postMessage("收到了", "http://www.leemagnum.com");
	}
}, false);

Event.Source is just a proxy for the window object in most cases , 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 //m.sbmmt.com/

The relevant knowledge of HTML5 actual combat and analysis of cross-document messaging (iframe transmission of information) is introduced here, and more related content Please pay attention to the PHP Chinese website (m.sbmmt.com)!

##