Using postMessage in HTML5 to implement Ajax cross-origin requests _ html5 tutorial tips-

This article describes how to use postMessage to implement Ajax cross-origin requests in HTML5. For more information, see cross-origin communication in Javascript Due to restrictions of the same-origin policy, typical Cross-origin problems include iframe and parent-level communication.

There are several common solutions:

(1) document. domain + iframe;
(2) dynamically create scripts;
(3) iframe + location. hash;
(4) flash.

We will not elaborate on these methods here, but record the HTML5 window. postMessage.
PostMessage is compatible with IE8 +, Firefox, Opera, Safari, and Chrome.

Two Exotic servers are required for testing. Of course, local and online servers can also be used as two exotic servers.
If you use phonegap for development, you can install the request file on the client, and then dynamically request the server for data processing to obtain and display the data. In this way, you can use any Web development language and method to develop the background required by the phonegap App.

1. postMessage usage

PostMessage is a new API introduced by html5. it allows multiple iframe/window cross-origin communications to solve js cross-origin problems.

Assume that the structure is as follows:

Copy the content to the clipboard using JavaScript Code

1. Test.html
3. PostMessage (cross-origin)
7. Information sent from the target iframe:

8. No information

11. 
    

Iframe.html

Copy the content to the clipboard using JavaScript Code

1. Iframe points to xiebiji.com

2. No information.

   Below is the Javascript code in test.html (send data): var win = document. getElementById ("iframe"). contentWindow; document. querySelector ('form'). onsubmit = function (e ){
3. Win. postMessage (document. getElementById ("message"). value ,"*");
4. If (e. preventDefault)
5. E. preventDefault ();
6. E. returnValue = false;
7. }

The key code is as follows:

Copy the content to the clipboard using JavaScript Code

1. Win. postMessage (document. getElementById ("message"). value ,"*");

PostMessage is a method of communication objects. Therefore, to communicate with iframe, the iframe object calls the postMessage method. PostMessage has two parameters. The first parameter is the data to be transmitted, and the second parameter is the domain that allows communication. "*" indicates that the accessed domain is not judged and can be understood as allowing communication between all domains.

Then the code in iframe.html that listens to receive data:

Copy the content to the clipboard using JavaScript Code

1. Var parentwin = window. parent; window. onmessage = function (e ){
2. Document. getElementById ("test"). innerHTML = e. origin + "say:" + e. data;
3. Parentwin. postMessage ('Hi! You sent me "'+ e. data + '". ',"*");};

Easy to understand. E. data contains the transmitted data. e. origin indicates the source domain.

Then iframe.htmlalso sends the response data to test.html, and test.html receives the data. If the code is the same, no code will be pasted.

2. Ajax cross-origin request

. In this way, cross-origin Ajax requests are implemented. It is actually very simple.

Paste the sample code, but it has nothing to do with the above Code.

Copy the content to the clipboard using JavaScript Code

1. (Function () {// obtain cross-Origin data window. onmessage = function (e ){
2. Var url = "http://yangzebo.com/demo/noforget/test.php? Msg = "+ e. data;
3. // Ajax var xhr = getXHR ();
4. If (xhr ){
5. Xhr. open ("GET", url, true );
6. Xhr. onreadystatechange = changeHandle;
7. Xhr. send (null);} else {
8. Alert ("Ajax not supported ");}
9. Function changeHandle () {// return Processing
10. If (xhr. readyState = 4 ){
11. Var parentwin = window. parent;
12. Parentwin. postMessage (xhr. responseText, "*"); // send data across domains
13. }}
14. Function getXHR () {// get XMLHttpRequest
15. Var xhr_temp; if (window. XMLHttpRequest ){
16. Xhr_temp = new XMLHttpRequest ();
17. } Else if (window. ActiveXObject ){
18. Xhr_temp = new ActiveXObject ("Microsoft. XMLHTTP ");
19. } Else {
20. Xhr_temp = null;
21. }
22. Return xhr_temp;
23. }};})();

Then give a Demo that is not easy to understand.

If you are interested in code requests, you can use the developer tools. "zebo male" is read from the database, "my databases.

3. Prompt

PostMessage can be called only when the contentWindow of iframe is obtained.

PostMessage must be called after the iframe is loaded. (It took me a long time)