Résumé des compétences inter-domaines javascript en méthodes_javascript

Cet article s'inspire de certains articles d'autres étudiants front-end et fait mon propre résumé pratique

Les exemples suivants contiennent des fichiers qui sont http://www.a.com/a.html et http://www.a.com/c.html Avec http://www.b.com/b.html, il suffit de récupérer les données en b.html depuis a.html

1.JSONP

jsonp profite du fait que la balise de script n'a aucune restriction entre domaines en ajoutant le nom de la fonction de rappel au paramètre url de src, puis le serveur reçoit le nom de la fonction de rappel et renvoie une fonction de rappel contenant des données

  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

Supposons qu'un 5964f032db16f47cdc9f6df77164f3a0065276f04003e4622c4fe6b64f465b88 communiquer entre nous dans ces deux 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");
  }

Lorsque vous ouvrez la page a de cette manière, une donnée apparaîtra en premier, puis une donnée b apparaîtra

3.window.name iframe

Le principe de window.name est d'utiliser la même fenêtre pour partager un window.name sur différentes pages. Cela nécessite de créer un fichier proxy c.html sous a.com afin que a.html puisse obtenir c.html après le. même origine.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 ajoute les données à l'URL de c.html sous la forme d'une valeur de hachage. Sur la page c.html, les données sont obtenues via location.hash puis transmises à a.html (cet exemple est). le hachage est passé à a.html (bien sûr, il peut également être téléchargé à d'autres endroits)

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 est une méthode inter-domaines spécifiée dans XMLHttpRequest niveau 2. Dans les navigateurs prenant en charge cette méthode, la méthode d'écriture de javascript est exactement la même que la méthode d'écriture d'ajax qui ne traverse pas le domaine, tant que le serveur doit définir Access-Control-Allow-Origin : *

6.document.domain

Cette méthode convient au même domaine principal mais à des sous-domaines différents, tels que http://www.a.com et http://b.a.com
S'il y a a.html et b.html sous ces deux noms de domaine,

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";

Remarque : document.domain doit être défini sur lui-même ou sur un domaine parent de niveau supérieur, et le domaine principal doit être le même.