Use html5 postMessage and window. name to implement multi-browser cross-Origin

Cross-OriginThis is an "very old" problem. Because of the same-origin policy of the browser, different domain names cannot request data across domain names. Although this design is much safer, however, cross-domain operations are required for large websites to maintain multiple domain names at the same time. For example, the cross-domain request data implemented by jssdk on the Weibo open platform, and synchronous login between weibo.com and sina.com.

I have also mentioned a lot of cross-origin methods before, including combining server-side and cross-origin implemented by pure javascript. For example, cross-origin Resource Sharing (CORS) cross-origin ajax call and document. domain + iframe implement cross-domain Ajax and JSONP implement perfect cross-domain. Cross-origin is also mentioned in my previous article "getting started with javascript to advanced PPT.
Of course, there are also many cross-origin articles, such as koubei UED's article 10 cross-origin resource sharing methods. You can read it.

Html5 I am talking about todayPostMessageWindow. name and window. name are not a new cross-domain method, because many people write articles, but I do not know who actually applies them? The old and new jssdkks of Sina Weibo are both in this way, and xd.html of the previous human network is included. Of course, the current people and facebook are cross-domain implemented through flash, which is not what we are talking about today.

Html5 postMessage implements cross-Origin

PostMessage is a new function of html5. it can implement communication between different domain names. By sending data to postMessage, the listener adds an onmessage event in the parent and child windows.
The disadvantage is obvious. Only browsers that support html5 support this cross-origin method. For example, IE6 and 7 are rejected!

Window. name implements cross-Origin

Cross-Domain Implementation of window. name is also an old problem. kejun wrote a demo before, but it gives communication with the same domain name.
In fact, the kejun instance implements cross-origin, but it adopts the same domain name, and the process is relatively rugged:

1. Create an iframe and specify src as the Cross-origin page.
2. The window. name is modified by the cross-domain file and the data is transmitted to window. name.
3. Modify iframe. src as the domain proxy file, and then obtain contentWindow. name.
4. Process data and clear iframe

Make full useWindow. nameThis feature does not change the name because the page url is changed.
However, if we use it on our own, we can still use it. If we want others to use what we write, the learning cost will be too high.

Multi-browser bidirectional cross-Origin

To solve the problem above, we use the following method:PostMessageThe browser uses postMessage. If not, the browser uses window. name method. Fortunately, windows can be set across domains in IE6 and 7. name, And we can simply use window. name comesCross-Origin. Then, create a timer to monitor whether window. name has changed. If it changes, it will receive and analyze window. name and then make the request.

No more nonsense ~ A cross-domain demo is provided,Click to view multi-browser bidirectional cross-origin demo.