Zusammenfassung der domänenübergreifenden Javascript-Methoden_Javascript-Fähigkeiten

Dieser Artikel basiert auf einigen Artikeln anderer Front-End-Studenten und stellt eine eigene praktische Zusammenfassung dar

Die folgenden Beispiele enthalten Dateien, die http://www.a.com/a.html und http://www.a.com/c.html sind http://www.b.com/b.html, Sie müssen lediglich die Daten in b.html von a.html abrufen

1.JSONP

jsonp nutzt die Tatsache, dass das Skript-Tag keine domänenübergreifenden Einschränkungen hat, indem es den Namen der Rückruffunktion an den URL-Parameter von src anhängt. Anschließend empfängt der Server den Namen der Rückruffunktion und gibt eine Rückruffunktion mit Daten zurück

  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

Angenommen, ein auf diesen beiden Seiten miteinander kommunizieren

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

Wenn Sie Seite a auf diese Weise öffnen, werden zuerst a-Daten und dann b-Daten angezeigt

3.window.name iframe

Das Prinzip von window.name besteht darin, dasselbe Fenster zu verwenden, um einen window.name auf verschiedenen Seiten zu teilen. Dazu muss eine Proxy-Datei c.html unter a.com erstellt werden, damit a.html nach dem c.html erhalten kann gleicher Ursprung. 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 hängt die Daten in Form eines Hash-Werts an die URL von c.html an. Auf der c.html-Seite werden die Daten über location.hash abgerufen und dann an a.html übergeben (dieses Beispiel ist). der Hash wird an a.html übergeben (natürlich kann er auch an andere Orte hochgeladen werden)

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 ist eine domänenübergreifende Methode, die in XMLHttpRequest Level 2 spezifiziert ist. In Browsern, die diese Methode unterstützen, ist die Schreibmethode von Javascript genau die gleiche wie die Schreibmethode von Ajax, die nicht domänenübergreifend ist, solange der Server Access-Control-Allow-Origin: *

festlegen muss

6.document.domain

Diese Methode eignet sich für dieselbe Hauptdomain, aber unterschiedliche Subdomains, wie z. B. http://www.a.com und http://b.a.com
Wenn sich unter diesen beiden Domänennamen a.html und b.html befinden,

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

Hinweis: document.domain muss auf sich selbst oder eine übergeordnete Domäne einer höheren Ebene eingestellt sein und die Hauptdomäne muss dieselbe sein.