Summary of javascript cross-domain methods_javascript skills

This article draws on some articles from other front-end students and makes a practical summary of my own

The following examples contain files that are http://www.a.com/a.html and http://www.a.com/c.html With http://www.b.com/b.html, all you have to do is get the data in b.html from a.html

1.JSONP

jsonp takes advantage of the fact that the script tag has no cross-domain restrictions by appending the callback function name to the url parameter of src, and then the server receives the callback function name and returns a callback function containing data

  function doSomething(data) {
    // 对data处理
  }
  var script = document.createElement("script");
  script.src = "http://www.b.com/b.html?callback=doSomething";
  document.body.appendChild(script);

  // 1.生成一个script标签，将其append在body上，向服务器发出请求
  // 2.服务器根据 callback 这个参数生成一个包含数据的函数 doSomething({"a", "1"})
  // 3.页面事先已声明doSomething函数，此时执行 doSomething(data) 这个函数，获得数据

2.HTML5 postMessage

Suppose an is nested in a.html , communicate with each other in these 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");
  }

When you open page a in this way, a data will pop up first, and then b data will pop up

3.window.name iframe

The principle of window.name is to use the same window to share a window.name on different pages. This requires creating a proxy file c.html under a.com so that a.html can obtain c.html after the same origin. window.name

a.html

  var iframe = document.createElement("iframe");
  iframe.src = "http://www.b.com/b.html";
  document.body.appendChild(iframe); // 现在a.html里建一个引用b.html的iframe，获得b的数据

  var flag = true;
  iframe.onload = function() {
    if (flag) {
      iframe.src = "c.html"; 
// 判断是第一次载入的话，设置代理c.html使和a.html在同目录同源，这样才能在下面的else取到data
      flag = false;
    } else { // 第二次载入由于a和c同源，a可以直接获取c的window.name
      alert(iframe.contentWindow.name);

      iframe.contentWindow.close();
      document.body.removeChild(iframe);
      iframe.src = '';
      iframe = null;
    }
  }

b.html

window.name = "这是 b 页面的数据";

4.window.location.hash iframe

b.html appends the data to the url of c.html in the form of a hash value. On the c.html page, the data is obtained through location.hash and then passed to a.html (this example is the hash passed to a.html (of course it can also be uploaded to other places)

a.html

  var iframe = document.createElement("iframe");
  iframe.src = "http://www.b.com/b.html";
  document.body.appendChild(iframe); // 在a页面引用b
  function check() { // 设置个定时器不断监控hash的变化，hash一变说明数据传过来了
    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); // 将数据附加在c.html的hash上
  }

c.html

// 获取自身的hash再传到a.html的hash里，数据传输完毕
parent.parent.location.hash = self.location.hash.substring(1); 

5.CORS

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

6.document.domain

This method is suitable for the same main domain but different subdomains, such as http://www.a.com and http://b.a.com
If there are a.html and b.html under these two domain names,

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....); // 在这里操作b.html里的元素数据
  }

b.html

  document.domain = "a.com";

Note: document.domain needs to be set to itself or a higher-level parent domain, and the main domain must be the same.