Ringkasan kaedah silang domain javascript_kemahiran javascript

Artikel ini menggunakan beberapa artikel daripada pelajar hadapan lain dan membuat ringkasan praktikal saya sendiri

Contoh berikut mengandungi fail yang http://www.a.com/a.html dan http://www.a.com/c.html Dengan http://www.b.com/b.html, anda hanya perlu mendapatkan data dalam b.html daripada a.html

1.JSONP

jsonp mengambil kesempatan daripada fakta bahawa teg skrip tidak mempunyai sekatan merentas domain dengan menambahkan nama fungsi panggil balik pada parameter url src, dan kemudian pelayan menerima nama fungsi panggil balik dan mengembalikan fungsi panggil balik yang mengandungi 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

Andaikan 5964f032db16f47cdc9f6df77164f3a0065276f04003e4622c4fe6b64f465b88 berkomunikasi antara satu sama lain dalam dua halaman ini

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

Apabila anda membuka halaman a dengan cara ini, data akan muncul dahulu, dan kemudian b data akan muncul

3.window.name iframe

Prinsip window.name adalah menggunakan tetingkap yang sama untuk berkongsi tetingkap.nama pada halaman yang berbeza Ini memerlukan mencipta fail proksi c.html di bawah a.com supaya a.html boleh mendapatkan c.html selepas tetingkap asal yang sama. nama

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 menambahkan data pada url c.html dalam bentuk nilai cincang Pada halaman c.html, data diperoleh melalui location.hash dan kemudian dihantar ke a.html (contoh ini cincangan dihantar ke a.html (sudah tentu ia juga boleh dimuat naik ke tempat lain)

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 ialah kaedah merentas domain yang dinyatakan dalam XMLHttpRequest Tahap 2. Dalam penyemak imbas yang menyokong kaedah ini, kaedah penulisan javascript adalah sama seperti kaedah penulisan ajax yang tidak merentas domain, selagi pelayan perlu menetapkan Access-Control-Allow-Origin: *

6.document.domain

Kaedah ini sesuai untuk domain utama yang sama tetapi subdomain berbeza, seperti http://www.a.com dan http://b.a.com
Jika terdapat a.html dan b.html di bawah kedua-dua nama domain ini,

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

Nota: document.domain perlu ditetapkan kepada dirinya sendiri atau domain induk peringkat lebih tinggi dan domain utama mestilah sama.