Several methods of JavaScript cross-domain

The following examples contain files that are for http://www.a.com/a.html , http://www.a.com/c.html with http://www.b.com/b.html , to be done from a.html the data obtained in b.html the

1.JSONP

jsonpis to use the script attribute with no cross-domain restriction on the label, by src appending the url callback function name to the parameter, and then the server receives the callback function name and returns a callback function containing the data

  function dosomething (data) {        //  to Data processing     }    var script = Document.createelement ("script");     = "Http://www.b.com/b.html?callback=doSomething";    Document.body.appendChild (script);     // 1. Generate a script tag, append it on the body, make a request    to the server // 2. The server generates a function dosomething ({"A", "1"}) that contains the data according to the callback parameter.    // 3. The page has previously declared the DoSomething function, at which time the dosomething (data) function is executed to obtain the data

2.HTML5 's PostMessage

Let's say we're a.html nesting inside <iframe src="http://www.b.com/b.html" frameborder="0"></iframe> , communicating with each other in these two pages.

A.html

function () {        Window.addeventlistener(function(e) {            alert (e.data);        });        window.frames[0].postmessage ("B Data", "http://www.b.com/b.html");    }

B.html

function () {        Window.addeventlistener(function(e) {            alert (e.data);        });        Window.parent.postMessage ("A Data", "http://www.a.com/a.html");    }

This opens a the page first a data , then pops upb data

3.window.name + iframe

window.nameThe principle is to use the same window on different pages share a window.name , this need to a.com create a proxy file c.html , so that a.html the homologous can be obtained after c.html thewindow.name

A.html

 variframe = document.createelement ("iframe"); IFRAME.SRC= "Http://www.b.com/b.html"; Document.body.appendChild (IFRAME); //now a.html a reference to the b.html iframe, get B data    varFlag =true; Iframe.onload=function() {        if(flag) {IFRAME.SRC= "C.html"; //If the judgment is the first time, set the proxy c.html and a.html in the same directory as the same, in order to be in the following else to fetch the dataFlag =false; } Else{//second load due to a and C homology, a can directly obtain C's Window.namealert (iframe.contentWindow.name);            Iframe.contentWindow.close ();            Document.body.removeChild (IFRAME); IFRAME.SRC= ' '; IFrame=NULL; }    }

B.html

Window.name = "This is data on page B";

4.window.location.hash + iframe

b.htmlAppend the data to hash c.html the value, and upload it to the url c.html page by location.hash fetching it a.html (this example is uploaded a.html hash , and of course it can be uploaded elsewhere)

A.html

var iframe = document.createelement ("iframe");     = "http://www.b.com/b.html";     // Reference B    on page A function // set a timer to constantly monitor the change of the hash, a change in the hash indicates that the        data passed over var hashs = window.location.hash;         if (HASHS) {            clearinterval (time);            Alert (hashs.substring (1));        }    }     var time = setinterval (check, 30);

B.html

function () {        var data = "This is B ' s data";          var iframe = document.createelement ("iframe");         = "http://www.a.com/c.html#" + data;         // append the data to the c.html hash    }

C.html

// get the hash of itself and then upload to a.html hash, data transfer is complete .

5.CORS

CORSIs XMLHttpRequest Level 2 a cross-domain approach stipulated in the. In browsers that support this approach, the wording is exactly the same as that of a javascript non-cross-domain ajax , as long as the server needs to setAccess-Control-Allow-Origin: *

6.document.domain

This approach applies to the same primary domain, with different subdomains, such as http://www.a.comhttp://b.a.com
If each of the two domains has a a.html and b.html ,

A.html

Document.domain = "A.com";     var iframe = document.createelement ("iframe");     = "http://b.a.com/b.html";    Document.body.appendChild (IFRAME);     function () {        //  manipulate element data in b.html here    }

B.html

Document.domain = "A.com";

Note: document.domain The parent domain needs to be set to its own or higher level, and the primary domain must be the same.

Several ways to cross-domain JavaScript