Javascript cross-origin method aggregation _ javascript skills

For security reasons, JavaScript does not allow cross-origin calls to objects on other pages. However, security restrictions also bring a lot of trouble to inject iframe or ajax applications. Here we will briefly sort out the cross-origin-related issues. This article learns from other front-end students' articles and makes a practical summary.

The files contained in the following example are http://www.a.com/a.html, http://www.a.com/c.html and http://www. B .com/ B .html, all the data in B .htmlis obtained from a.html

1. JSONP

Jsonp uses the script tag without cross-origin restrictions. By attaching the callback function name to the src url parameter, the server receives the callback function name and returns a callback function containing data.

Function doSomething (data) {// data processing} var script = document. createElement ("script"); script. src = "http://www. B .com/ B .html? Callback = doSomething "; document. body. appendChild (script); // 1. generate a script tag, append it to the body, and send a request to the server // 2. the server generates a function containing data based on the callback parameter doSomething ({"a", "1"}) // 3. the doSomething function has been declared on the page in advance. At this time, the doSomething (data) function is executed to obtain data.

2. postMessage of HTML5

Embedded in a.html, communication between the two pages

A.html

  window.onload = function() {    window.addEventListener("message", function(e) {      alert(e.data);    });    window.frames[0].postMessage("b data", "http://www.b.com/b.html");  }

B .html

  window.onload = function() {    window.addEventListener("message", function(e) {      alert(e.data);    });    window.parent.postMessage("a data", "http://www.a.com/a.html");  }

In this way, a data is displayed on page a, and B data is displayed.

3. window. name + iframe

Window. name of struct

A.html

Var iframe = document. createElement ("iframe"); iframe. src = "http://www. B .com/ B .html"; document. body. appendChild (iframe); // create an iframe of B .html in a.html to obtain the data var flag of B = true; iframe. onload = function () {if (flag) {iframe. src = "c.html"; // configure the proxy c.html and a.html are the same in the same directory, so that data flag = false can be obtained in the following else;} else {// The second load is because a and c are the same, a can directly obtain the window of c. name alert (iframe. contentWindow. name); iframe. contentWindow. close (); document. body. removeChild (iframe); iframe. src = ''; iframe = null ;}}

B .html

Window. name = "this is the data on page B ";

4. window. location. hash + iframe

Of course, it can be uploaded to other places)

A.html

Var iframe = document. createElement ("iframe"); iframe. src = "http://www. B .com/ B .html"; document. body. appendChild (iframe); // reference B function check () {// set a timer on page a to continuously monitor hash changes. If hash changes, the data passes through var hashs = window. location. hash; if (hashs) {clearInterval (time); alert (hashs. substring (1) ;}} var time = setInterval (check, 30 );

B .html

Window. onload = function () {var data = "this is B's data"; var iframe = document. createElement ("iframe"); iframe. src = "http://www.a.com/c.html#" + data; document. body. appendChild (iframe); // Add data to the hash of c.html}

C.html

// The acquired hashmap is uploaded to the hash file a.html. After data transmission is completed, parent. parent. location. hash = self. location. hash. substring (1 );

5. CORS

CORS is a cross-origin method specified in XMLHttpRequest Level 2. In browsers that support this method, the javascript writing method is the same as that of the non-Cross-Origin ajax method, as long as the server needs to set Access-Control-Allow-Origin :*

6.doc ument. domain

This approach applies to the same primary domain, different subdomains, such as http://www.a.com and http:// B .a.com
Assume that the two domain names have their respective names: a.html and B .html,

A.html

Document. domain = "a.com"; var iframe = document. createElement ("iframe"); iframe. src = "http:// B .a.com/ B .html"; document. body. appendChild (iframe); iframe. onload = function () {console. log (iframe. contentWindow ....); // operate element data in B .html here}

B .html

  document.domain = "a.com";

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