JavaScript uses HTML5's window.postMessage to implement cross-domain communication example

JavaScript uses HTML5's window.postMessage to implement cross-domain communication example_javascript skills

WBOY

Release： 2016-05-16 16:52:39

Original

1830 people have browsed it

Due to the restrictions of the same-origin policy, cross-domain communication has always been a thorny issue in JavaScript. Of course, there are many solutions:
1. The setting of the document.domain iframe applies to the same main domain but different subdomains;
2. Using iframe and location.hash, the data is directly exposed in the URL, and the data capacity and types are limited
3.Flash LocalConnection, objects can communicate in one SWF file or between multiple SWF files, as long as

are on the same client, across applications, and across domains.
window.name saves data and cross-domain iframe static proxy dynamic transmission scheme makes full use of the feature of window.name that the name does not change because the URL of the page changes.
There are many example codes for various solutions on the Internet, you can search for them yourself.

One of the coolest APIs in html5: Cross Document Messaging. Advanced browsers Internet Explorer 8, chrome, Firefox, Opera and Safari will all support this feature. The implementation of this function is also very simple, mainly including the "message" event for receiving information and the "postMessage" method for sending messages.

The "postMessage" method of sending a message

Send a message to the external window:

Copy code The code is as follows:

otherWindow.postMessage(message, targetOrigin);

otherWindow: refers to the target window, that is, which window to send the message to, which is the window.frames property Members of or the window created by the window.open method
Parameter description:
1.message: is the message to be sent, type is String, Object (not supported by IE8 and 9)
2.targetOrigin: Yes To limit the message receiving range, please use '*' if not limited.

"message" event to receive the message

Copy Code The code is as follows:

 
var onmessage = function (event) { 
var data = event.data; 
var origin = event.origin; 
//do someing 
}; 
if (typeof window.addEventListener != 'undefined') { 
window.addEventListener('message', onmessage, false); 
} else if (typeof window.attachEvent != 'undefined') { 
//for ie 
window.attachEvent('onmessage', onmessage); 
}

The first parameter of the callback function is received Event objects have three commonly used attributes:
1.data: message
2.origin: message source address
3.source: source DOMWindow object

Of course, postmessage also has some shortcomings:
1.ie8, the data type value passed under ie9 supports string type, but you can use mutual conversion between JSON objects and strings to solve this problem;
2.ie6, ie7 needs to write a compatibility solution , I personally think window.name is more reliable;