JS spanning summary

There are several scenarios for JavaScript cross-domain:
1. Between subdomains based on the same parent domain, such as: A.c.com and b.c.com
2, based on the different parent domains, such as: Www.a.com and www.b.com
3, the different ports, such as: www.a.com:8080 and www.a.com:8088
4, the agreement is different, such as: Http://www.a.com and https://www.a.com
For cases 3 and 4, it needs to be resolved through a background proxy, as follows:
A. Create a proxy program under the initiator's domain
B, the initiator's JS call the proxy program under this domain
C, Proxy sends the request to the receiver and obtains the corresponding data
D, Proxy will get the data returned to the initiator JS

and the situation 1 and 2 in addition to through the background proxy this way, there are 7 ways to solve:
1, Document.domain+iframe (can only solve the situation 1):
A, set document.domain on the initiator page and receiver page, and set the value to the parent domain's primary domain name (window.location.hostname)
B. Create a hidden iframe,iframe source on the initiator page is the recipient page
C, according to the different browser, through the Iframe.contentdocument | | Iframe.contentWindow.document to get the content of the receiving page
D. Interacting with the receiver through the content of the received page of the receiving party
One drawback of this approach is that when a domain is attacked, a security vulnerability occurs in the other domain.

2. Create script dynamically:
A, on the initiator page dynamically load a Script,script URL to the receiver of a processing address (background), the address returned by the JavaScript method will be executed, in addition to the URL can pass some parameters, the method only supports get method to submit parameters.
b, the loaded script can be called after the cross-domain JS method to do some of their own processing

3, Location.hash+iframe:
A, the initiator creates a hidden iframe,iframe source pointing to the recipient's page, and transmits the data through the hash value of the recipient's page
B, the initiator creates a timer, checks its own location.hash regularly and handles accordingly
C, the receiver creates a hidden iframe,iframe source that points to a proxy page in the initiator's domain, and transmits the data processed by the receiver based on the initiator's incoming data through the hash value of the proxy page
D, the receiver to create a timer, regularly check their own location.hash and the corresponding processing
E, Proxy page Create a timer, check your own location.hash and update the hash value of the initiator page synchronously
WWW.A.COM/A.HTML#AAA, where #aaa is the Location.hash value

4, Window.name:
A, initiator page creates a hidden iframe, and the source points to the receiving page
b, the receiver on their own page through script will need to transfer the data into the Window.name
C, initiator in the OnLoad method of the IFrame to change the source of the IFRAME and its own proxy page under the same domain (because the value of Window.name can only be accessed under the same domain)
D, gets the value of the Window.name (although the source of the IFRAME has changed, but the value of Window.name does not change)

5, HTML5 's PostMessage
A, Receiverwindow.postmessage (msg, targetorigin), Receiverwindow is a reference to the window that receives the message, which can be an IFRAME contentwindow/ One of the window.open return values/window.frames, MSG is the message to be sent, string type, Targetorigin is used to restrict the Receiverwindow URI, including the primary domain name and port, using "*" means no limit, However, for security reasons, you need to set up to prevent the message from being sent to a malicious website, if the Targetorigin URI and Receiverwindow do not match, then discard the message.
B, the receiver obtains the message through a message event, and through the Event.origin property to verify the sender and through Event.data to obtain the transmitted message content, Event.source to obtain the sender's Window object

6, Window.opener (for IE6, 7, that is, Operner hack method, but it seems to be no longer used, as long as the Microsoft security patch. KB2497640 will not work)
A, initiator page creates a hidden iframe, and the source points to the receiving page
B, initiator page through Iframe.contentWindow.opener = {A:function (params) {...}, b:function (params) {...} ...} To define the methods that can be called by the receiver
C. The receiver page invokes the initiator-defined method through WINDOW.OPENER.A/WINDOW.OPENER.B
d, receiver page through Parent.opener = {C:function (params) {...}, d:function (params) {...} ...} To define a method that can be called by the initiator
E, initiator page invokes receiver-defined methods through OPENER.C/OPENER.D
In fact, the principle is to reset the opener object

7, Window.navigator (for IE6, 7, seems to be able to use now, has not been patched out)
A, initiator page creates a hidden iframe, and the source points to the receiving page
B, initiator page through WINDOW.NAVIGATOR.A = function (params) {...}; Window.navigator.b = function (params) {...}; To define the method that is called by the receiving party
C, the receiving party page through WINDOW.NAVIGATOR.A (params); Window.navigator.b (params); To invoke the initiator-defined method
d, receiver page through window.navigator.c = function (params) {...}; WINDOW.NAVIGATOR.D = function (params) {...}; To define the method that is called by the initiator
E, initiator page through WINDOW.NAVIGATOR.C (params); WINDOW.NAVIGATOR.D (params); To invoke the method defined by the receiver

JS spanning summary