Using postMessage in HTML5 to transfer data between two web pages

It is estimated that few people know that there is a window.postMessage API in HTML5 APIS. The function of window.postMessage is to allow programmers to send data information between two windows/frames across domains. Basically, it's like cross-domain AJAX, but instead of interacting between the browser and the server, it communicates between two clients. Let's take a look at how window.postMessage works. All browsers except IE6 and IE7 support this feature.

Data sending end

The first thing we have to do is to create the communication initiator, which is the data source "source". As the initiator, we can open a new window, or create an iframe, and send data to the new window. For simplicity, we send it every 6 seconds, and then create a message listener to listen for the feedback information from the target window.

//弹出一个新窗口   

    var domain = 'http://scriptandstyle.com';   

    var myPopup = window.open(domain    

                + '/windowPostMessageListener.html','myWindow');   

      

    //周期性的发送消息   

    setInterval(function(){   

     var message = 'Hello!  The time is: ' + (new Date().getTime());   

     console.log('blog.local:  sending message:  ' + message);   

            //send the message and target URI   

     myPopup.postMessage(message,domain);   

    },6000);   

      

    //监听消息反馈   

    window.addEventListener('message',function(event) {   

     if(event.origin !== 'http://scriptandstyle.com') return;   

     console.log('received response:  ',event.data);   

    },false);

Here I used window.addEventListener, but this does not work in IE because IE uses window.attachEvent. If you don't want to determine the browser type, you can use some tool libraries, such as jQuery or Dojo.

Assuming that your window pops up normally, we send a message - you need to specify the URI (if necessary, you need to specify the protocol, host, port number, etc.), and the message receiver must be on this specified URI. If the target window is replaced, the message will not be sent.

We also created an event listener to receive feedback information. One thing is extremely important, you must verify the URI of the source of the message! You can only process messages from the target party if it is legitimate.

If you are using an iframe, the code should be written like this:

//捕获iframe   

    var domain = 'http://scriptandstyle.com';   

    var iframe = document.getElementById('myIFrame').contentWindow;   

      

    //发送消息   

    setInterval(function(){   

     var message = 'Hello!  The time is: ' + (new Date().getTime());   

     console.log('blog.local:  sending message:  ' + message);   

            //send the message and target URI   

     iframe.postMessage(message,domain);    

    },6000);

Make sure you are using the contentWindow property of the iframe, not the node object.

Data receiving end

What we want to develop next is the page of the data receiving end. There is an event listener in the receiver window that listens for the "message" event. Likewise, you also need to verify the address of the source of the message. Messages can come from any address. Make sure that the message being processed comes from a trusted address.

//响应事件   

    window.addEventListener('message',function(event) {   

     if(event.origin !== 'http://davidwalsh.name') return;   

     console.log('message received:  ' + event.data,event);   

     event.source.postMessage('holla back youngin!',event.origin);   

    },false);

The above code snippet feeds back information to the message source to confirm that the message has been received. The following are several important event attributes:

source – Message source, the message sending window/iframe.
origin – The URI of the message source (may include protocol, domain name and port), used to verify the data source.
data – Data sent by the sender to the receiver.

These three attributes are data that must be used in message transmission.

Using window.postMessage

Like many other web technologies, if you do not verify the validity of the data source, then using this technology will become very complicated. Danger; you are responsible for the security of your application. window.postMessage is like PHP relative to JavaScript technology. window.postMessage is cool, isn't it?

The above is the content of using postMessage to transfer data between two web pages in HTML5. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!