A closer look at cross-document messaging in HTML5

Cross-document messaging (cross-document messaging), sometimes referred to as XDM, refers to the transmission of messages between pages from different domains. For example, a page in the www.w3cmm.com domain communicates with a page in the p2p.w3cmm.com domain located in an inline frame. Before the emergence of the XDM mechanism, it took a lot of effort to implement this kind of communication more reliably. XDM standardizes this mechanism, allowing us to implement cross-document communication securely and simply.

The core of XDM is the postMessage() method. In the HTML5 specification, other parts besides the XDM part will also mention this method name, but they are all for the same purpose: passing data to another place. For XDM, "another place" refers to the

The postMessage() method receives two parameters: a message and a string indicating the domain from which the message recipient comes. The second parameter is very important to ensure secure communication and prevents the browser from sending messages to unsafe places. Consider the following example.

var iframWindow = document.getElementById("myframe").contentWindow;
iframWindow.postMessage("A secret", "http://www.w3cmm.com");

The last line of code attempts to send a message to the inline frame and specifies that the document in the frame must originate from the "http://www.w3cmm.com" domain. If the sources match, the message is delivered to the iframe; otherwise, postMessage() does nothing. This restriction prevents the position in the window from changing without your knowledge. If the second parameter passed to postMessage() is "*", it means that the message can be sent to documents from any domain, but we do not recommend this.

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 a 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 postMessage().
origin: The domain where the document sending the message is located, such as "http://www.w3cmm.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 is from the same domain, then this object is window.

It is crucial 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, detecting the source of the message in the onmessage handler can ensure that the incoming message comes from a known page. The basic detection modes are as follows.

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};

EventUtil.addHandler(window, "message", function (event) {
    //确保发送消息的域是已知的域
    if (event.origin == "http://www.w3cmm.com") {
        //处理接收到的数据
        processMessage(event.data);
        //可选：向来源窗口发送回执
        event.source.postMessage("Received!", "http://p2p.w3cmm.com");
    }
});

I still want to remind everyone that event.source is just a proxy for the window object in most cases, not the actual window object. In other words, no other information about the window object can be accessed through this proxy object. Remember, just call postMessage() through this proxy. This method never exists and can always be called.

XDM also has some quirks. 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. However, not all browsers have implemented this change. To be on the safe side, when using postMessage(), it is best to only pass strings. If you want to pass in structured data, the best option is to first call JSON.stringify() on the data to be passed in, and pass it in through postMessage() String, and then call JSON.parse() in the onmessageEvent Handling program.

Using XDM is very convenient when loading content from other domains through inline frames. Therefore, this method of delivering messages is extremely common in mashups and social networking applications. With XDM, a page containing an

The above is the detailed content of A closer look at cross-document messaging in HTML5. For more information, please follow other related articles on the PHP Chinese website!