JavaScript クロスドメインメソッドのまとめ_JavaScript スキル

この記事は、他のフロントエンド学生の記事を参考にして、私自身の実用的な要約を作成しています

次の例には、http://www.a.com/a.html および http://www.a.com/c.html というファイルが含まれています。 http://www.b.com/b.html、あなたがしなければならないのは、a.html

から b.html のデータを取得することだけです。

1.JSONP

jsonp は、コールバック関数名を src の url パラメータに追加することで、スクリプト タグにクロスドメイン制限がないという事実を利用し、サーバーはコールバック関数名を受け取り、データを含むコールバック関数を返します。

  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

f95c054db51cc9297dca33bc2e1ebc87065276f04003e4622c4fe6b64f465b88 が a.html にネストされているとします。これら 2 つのページで相互に通信します

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

この方法でページ a を開くと、最初に a のデータが表示され、次に b のデータが表示されます

3.window.name iframe

window.name の原則は、同じウィンドウを使用して異なるページで window.name を共有することです。これには、a.html が後で c.html を取得できるように、a.com の下にプロキシ ファイル c.html を作成する必要があります。同じ起源の 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 は、データをハッシュ値の形式で c.html の URL に追加します。c.html ページでは、データは location.hash を通じて取得され、a.html に渡されます (この例はa.html に渡されたハッシュ (もちろん、他の場所にアップロードすることもできます)

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 は、XMLHttpRequest レベル 2 で指定されたクロスドメイン メソッドです。このメソッドをサポートするブラウザでは、JavaScript の記述メソッドは、サーバーが Access-Control-Allow-Origin: *

を設定する必要がある限り、ドメインを越えない ajax の記述メソッドとまったく同じです。

6.document.domain

この方法は、http://www.a.com や http://b.a.com
など、同じメイン ドメインであっても異なるサブドメインに適しています。 これら 2 つのドメイン名の下に a.html と 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....); // 在这里操作b.html里的元素数据
  }

b.html

  document.domain = "a.com";

注: document.domain はそれ自体または上位レベルの親ドメインに設定する必要があり、メイン ドメインは同じである必要があります。