Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use postMessage in HTML5 to solve the cross-domain problem of POST in Ajax". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn "how to use postMessage in HTML5 to solve the cross-domain problem of POST in Ajax".

Due to the limitation of the same origin policy, Javascript has the problem of cross-domain communication, and the typical cross-domain problems are the communication between iframe and parent. Several general solutions:

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

PostMessage is a new API introduced by HTML5 to solve the cross-domain problem of js, which allows multiple iframe/window to communicate across domains.

HTML5 provides the function of receiving and sending information between web documents. Using this function, as long as you get the instance of the window object where the web page is located, not only the web pages of the same origin (domain + port number) can communicate with each other, but even cross-domain communication can be realized.

Browser support: IE8+,firefox4+,chrome8+ opera10+

1. First, to receive messages from other windows, you must listen for the message event of the window object, as shown in the following code:

Window.addEventListener ("message", function () {}, false)

two。 Second, you need to send messages to other windows using the postMessage method of the window object, which is defined as follows:

OtherWindow.postMessage (message, targetOrigin)

This method uses two parameters, the first parameter is the text of the message sent, but it can also be any javascript object, and the second parameter is the url address of the object window that receives the message (for example: http:127.0.0.1:8080/), but we can also use the wildcard "*" in the url address string to specify all domains, but we still recommend using a specific domain name OtherWindow is a reference to the window object to be sent.

Demo demo:

Suppose I bind the two domain names under the hosts file as follows:

127.0.0.1 abc.example.com

127.0.0.1 longen.example.com

Now, if there is an abc.html page under the abc.example.com domain and a def.html page under the longen.example.com domain, I hope the pages under these two different domain names can communicate with each other. The abc.html code is as follows:

Send a message to the iframechild window:

Message from target iframe: no information yet

The JS code is as follows:

Var win = document.getElementById ("iframe"). ContentWindow;document.getElementById ("submit"). Onclick = function (e) {e.preventDefault (); win.postMessage (document.getElementById ("message"). Value, "http://longen.example.com");} window.addEventListener (" message ", function (e) {e.preventDefault (); document.getElementById (" test ") [xss_clean] =" message from "+ e.origin +":\ n "+ e.data }, false)

The Def.html code is as follows:

HTML Code:

Send a message to the parent window abc.html:

There is no information yet.

The JS code is as follows:

Var parentwin = window.parent; window.addEventListener ("message", function (e) {document.getElementById ("test2") [xss_clean] = "domain from the parent window" + e.origin + ", and content data:" + e.data; parentwin.postMessage ('HI! you sent me'+ e.datadata'". , "http://abc.example.com");},false);

When I click on the abc.html page, I can see that the effect is as follows, returning the content from def.html. As follows:

We need to know the following information:

Messages can be received by listening for the message event of the window object.

You can get the source of the message by accessing the origin property of the message event.

You can get the message content by accessing the data property of the message event.

Use the postMessage method to send a message.

By accessing the source property of the message event, you can get the window object from which the message was sent (to be exact, it should be the window's proxy object).

With the above basic knowledge points, we can extend to the problem of realizing ajax POST cross-domain.

Second, use postMessage knowledge points to solve the cross-domain problem of POST in ajax.

Principle: the principle is also very simple. If the abc.html page under our domain name abc.example.com needs to send an ajax request (cross-domain, domain name is longen.example.com), then we should first cross-page document form, as above, we can now set up a page under longen.example.com, such as def.html. So we still embed a hidden field iframe src path in the abc.html page to point to the def,html page under the longen.example.com domain. The process is still similar to cross-document, except that you can now write an ajax request in the _ window.onmessage event in the def.html page, as shown in the following code:

The abc.html page under abc.example.com is as follows:

The html code is the same as above, and here is the JS code:

Var win = document.getElementById ("iframe"). ContentWindow;document.getElementById ("submit"). Onclick = function (e) {e.preventDefault (); win.postMessage (document.getElementById ("message"). Value, "http://longen.example.com/");} window.addEventListener (" message ", function (e) {e.preventDefault (); alert (typeof e.data) var json = JSON.parse (e.data); console.log (json); alert (json.url)}, false)

The def.html code is as follows:

The JS code is as follows:

/ / get cross-domain data _ window.onmessage = function (e) {$.ajax ({url: 'http://longen.example.com/webSocket/test.php', type:'POST', dataType:'text', / / data: {msg:e.data}, success: function (res) {var parentwin = window.parent; parentwin.postMessage (res, "http://abc.example.com");) / / send data across domains}});}

The test.php code is as follows:

The above is all the content of the article "how to use postMessage in HTML5 to solve the cross-domain problem of POST in Ajax". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.