JS PostMessage Cross-domain request solution

Source: Internet
Author: User
Tags add object window domain port number

Today I saw a very good article, can not help but want to reprint, personally tested, to solve the web development we often encountered the most headache cross-domain request problem. The article is mainly introduced HTML5 postMessage and OnMessage API detailed application , relatively long, I only intercepted a Cross-domain request solution part, want to see the full text of the person can see the original.

Cross-document Messaging Introduction

JavaScript cross-domain problems have always been a thorny issue due to the limitations of homology policies. HTML5 provides the ability to receive and send information to and from each other in a Web page document. With this feature, as long as you get to an instance of the Window object that the page is in, you can communicate with each other, or even across domains, between Web pages that have the same origin (domain + port number). To receive information sent from other windows, you must listen for the OnMessage event of the Window object, and other windows can pass the data through the PostMessage method. The method uses two parameters: the first parameter is the text of the message being sent, but it can also be any JavaScript object (the text is converted by JSON), the second parameter is the URL of the object window that receives the message, and the wildcard "*" in the URL address string can be used to specify all the locations.

Use of PostMessage and onmessage in cross-document messaging

In order to realize communication between different domains, it is necessary to add two domain names to the hosts file of the operating system for simulation.

Listing 3. Add two different domain names to the Hosts file

 
  
  
  1. 127.0.0.1 parent.com
  2. 127.0.0.1 child.com

Embeds a subpage through an iframe in a parent Web page and calls the PostMessage method in JavaScript code to send data to a child window.

Listing 4. Embed a child page in the parent page, call the PostMessage method to send the data

 
  
  1. test cross-domain Communication using html5
  2. </li> <li><li>Id= "Otherpage" >


  3. Value= "Send to Child.com" onclick= "Sendit ()"/>

Listens for OnMessage events in a child window and uses JAVASCRIPT implementations to display the data sent by the parent window.

Listing 5. The child window listens for the OnMessage event, displaying the data sent by the parent window

 
  
  1. web page from child.com
  2. Web page from http://child.com:8080

Figure 2. Parent Window Embedded child window

Figure 3. Parent window sends data to child window



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.