JavaScript uses HTML5 window.postmessage to implement Cross-domain communication examples

Source: Internet
Author: User

  This article mainly introduces JavaScript using HTML5 Window.postmessage to implement Cross-domain communication examples, you need friends can refer to the following

JavaScript has been a thorny issue because of the limitations of homology policies. Of course, the solution also has a lot of:  1.document.domain+iframe settings, applied to the primary domain the same and subdomains different;  2. With IFrame and Location.hash, data is exposed directly to the URL, the data capacity and type are limited   3.Flash localconnection, objects can communicate between a SWF file or multiple SWF files, as long as   & nbsp On the same client line, across applications, you can cross domains.   Window.name save data and cross-domain IFRAME static agent dynamic transmission scheme, full use of window.name because the URL of the page change and name does not change the characteristics.   Various programs on the Internet have a lot of instance code, you can search their own. One of the coolest APIs in     HTML5 is the transmission of cross document messaging across document messages. Advanced browsers Internet Explorer 8+, Chrome,firefox, Opera, and Safari will all support this feature. The implementation of this feature is also very simple, mainly including "message" events that accept information and "PostMessage" methods for sending messages.     Send messages to the "PostMessage" method     to the outside window to send messages:    code is as follows: Otherwindow.postmessage (message, Targetorigin); Otherwindow: Refers to the target window, which is a message to which window, is a member of the Window.frames property or a window   parameter description created by the window.open method:  1.message: Is the message to be sent, Type is String, Object (IE8, 9 not supported)   2.targetOrigin: is a limited message receive range, no limit please use ' * '     ' message ' event     & nbsp 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.add EventListener (' message ', OnMessage, false); } else if (typeof window.attachevent!= ' undefined ') { //for Sp Window.attachevent (' OnMessage ', OnMessage); } callback function The first parameter receives the Event object, there are three common properties:  1.data: Message   2.origin: Source Address   3.source: Source Domwindow object     Of course postmessage There are some deficiencies:  the data type values passed under 1.IE8,IE9 support string types, but you can use the The conversion of JSON objects and strings to solve this problem;  2.ie6,ie7 need to write a compatible solution, personally think window.name more reliable;
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.