JS PostMessage Cross-domain request solution

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

 
  
  

  
   
   
127.0.0.1 parent.com
  
   
   
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
 
 
  

  
   

   

  
   

   

  
   

   

  
   

   
test cross-domain Communication using html5
  
   

   

  
   

   

  
   

   

  
   

   

  
   

   
</li> <li><li>Id= "Otherpage" >
  
   

   



  
   

   

  
   

   
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
 
 
  

  
   

   

  
   

   

  
   

   

  
   

   
web page from child.com
  
   

   

  
   

   

  
   

   

  
   

   
Web page from http://child.com:8080
  
   

   

    

  
   

   

  
   

   

 
  
 
Figure 2. Parent Window Embedded child window
 
 
Figure 3. Parent window sends data to child window