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

Home

Web Front-end

JS Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:52 PM

html5 javascript

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;

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn