HTML5 window/iframe cross-domain messaging API introduction_html5 tutorial skills

Original address: HTML5′s window.postMessage API
Online example: Using HTML5's window.postMessage(Please open the console to view the log)

I wrote A MooTools plug-in "PostMessager" to encapsulate window.postMessage, you can click here to download!

Not many people understand the window.postMessage interface API of HTML5. window.postMessage allows cross-domain transfer of data and information between multiple windows/frames. In essence, window.postMessage plays the role of a cross-domain Ajax request. Of course, it does not require a remote server to cooperate. Next, we will introduce how window.postMessage works and how to use it in FireFox, IE8, Opera, Safari and Chrome.

1. Message sending end
The whole process The first step is to set up a "news source". Through this message source, we can send window-level data (message) to the newly opened window (or iframe). In the following example, the frequency of sending messages to the new window is once every 6 seconds, and event listening is set up to process the response information returned by the target window.

Copy code

The code is as follows:

function trace(message){
var infos = Array.prototype.slice.call(arguments,0).join(" ");
if("console" in window){
console.log(infos);
} else {
alert(infos);
}
};
// Create a pop-up window
var domain = 'http://scriptandstyle.com';
var myPopup = window.open (domain '/windowPostMessageListener.html','myWindow');
//Send messages regularly
setInterval(function(){
var message = 'Now time: ' (new Date().getTime( ));
trace('Data source. Message sent: ' message);
myPopup.postMessage(message,domain); //Send data information and set the target URI
},6*1000 );
function bindEvent(target,noOnEventName,handler){
if(window.addEventListener){
target.addEventListener(noOnEventName,handler);
} else if(window.attachEvent){
// The listening setting function of IE is attachEvent
target.attachEvent("on" noOnEventName,handler);
} else {
target["on" noOnEventName]=handler;
}
};
// Monitor the received information.
bindEvent(window,'message',function(event) {
// Only receive messages from a specific domain
if(event.origin !== 'http://scriptandstyle.com') return;
trace('Response information received: ',event.data);
},false);

The author of the original article uses the window.addEventListener method to bind events, but an error will be reported under IE (IE is window.attachEvent). Of course, you can create a function to wrap the event, or use a ready-made class library, such as MooTools or jQuery/dojo to achieve.
In the above example, if the new window opens normally, we can send a message through the window object reference myPopup and specify the URI (protocol, host name, port number) that must match (if the user jumps in the child window to other pages, the message will not be sent).
Similarly, we have also bound the event handler function to receive the message. As a reminder, it is important to verify the origin attribute of the message event, because it is possible to receive messages sent to you by all URIs, so that you will not be confused when interacting with multiple frames. After verifying the origin, how to handle this message depends on your specific business and needs.

If using iframe, then the code is as follows:

Copy the code

The code is as follows:

// Also create another window (iframe, frame, frameset, top, window are all window-related objects.)
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;
// Send messages in a loop. Of course, event-driven methods can also be used. . .
setInterval(function(){
var message = 'Current time: ' (new Date().getTime());
trace('Data source.Message sent: ' message);
iframe.postMessage(message,domain); //Send data information and set the target URI
},6*1000);

Make sure you can access the contentWindow attribute of the iframe object—— And not just the iframe object.

2. Message receiving end
The second step of the entire process is to make the target window ready. All the destination window has to do is listen to the message event, and of course verify the origin message source of the event. Reminder again: the message event handler can accept messages sent to it from any domain name, so it is very important to verify the origin and only process messages from the trust list.

Copy code

The code is as follows:

// Monitor the received information.
bindEvent(window,'message',function(event) {
// Only receive messages from specific domains
if(event.origin !== 'http://davidwalsh.name') return;
trace('Listened to information: ',event.data);
//Reply message
event.source .postMessage(""Hello, friends, I have received the message, event.origin);
},false);

The above example replies the response message to the request square. The important attributes of the
message event are:
source - the window/iframe object that sends the message
origin - the URI corresponding to the window that sends the message (protocol, domain, and port, if specified)
data - specific data information
These three objects are essential for the messaging system and verification.

Notes on using window.postMessage
Just like all other web technologies, the dangers are obvious if used improperly (without verifying the event source). Of course, security is up to you.
window.postMessage is very similar to PHP in JavaScript technology (haha, little advertisement!).window.postMessage is a very cool technology, what do you think?