摘要：四通過(guò)跨域一個(gè)頁(yè)面嵌入一個(gè)外域的頁(yè)面雖然兩個(gè)窗體之前能獲取彼此的對(duì)象，但是卻拿不到上的屬性和方法，例如一個(gè)頁(yè)面嵌入一個(gè)的我是父窗體的方法嵌入的窗體跟的域名不同，很明顯是跨域的，雖然能獲取到對(duì)象，但是拿不到頁(yè)面的任何方法和屬性。

js跨域是指通過(guò)js在不同域之間進(jìn)行相互通信或者數(shù)據(jù)傳輸，只要協(xié)議，域名，端口號(hào)其中有一個(gè)不同，就是跨域。下面總結(jié)一下我了解到的常用的跨域方法。

js通過(guò)script標(biāo)簽引入一個(gè)外域的資源是不受限制的，jsonp就是利用這個(gè)原理，來(lái)實(shí)現(xiàn)跨域的。

callback是前后臺(tái)約定的查詢參數(shù)，服務(wù)器端返回一個(gè)能執(zhí)行的js文件，這個(gè)js文件是調(diào)用callback對(duì)應(yīng)的參數(shù)值即getPrice執(zhí)行，并且返回對(duì)應(yīng)的數(shù)據(jù)，我們可以在getPrice方法里面來(lái)處理返回的數(shù)據(jù)，最終返回的結(jié)果如下

getPrice({
"data":{"priceType":"0","unit":"斤"},
"message":"價(jià)格獲取成功!!!",
"state":"1"
 })
 

jsonp的原理就是這樣，通過(guò)Script標(biāo)簽引入一個(gè)js文件，這個(gè)js文件加載成功會(huì)執(zhí)行callback對(duì)應(yīng)的指定方法，并且把我們需要的數(shù)據(jù)作為參數(shù)傳入，jsonp是需要服務(wù)器端配合的。

 $.ajax({
   url:"http://wsdetail.b2b.hc360.com/getSupplyPrice",
   dataType:"jsonp",
   data:{bcid："47296567"},
   jsonp:"callback",
   jsonpCallback:"getPrice",
   success:function(data){
      console.log(data);
   }
 })

下面是使用jquery的jsonp請(qǐng)求，jsonp只能是get請(qǐng)求，在jquery中jsonpCallback可以省略不寫，jquery會(huì)自動(dòng)生成一個(gè)全局函數(shù)替換callback=對(duì)應(yīng)的全局函數(shù)，取到數(shù)據(jù)會(huì)自動(dòng)銷毀這個(gè)全局函數(shù)；jsonp參數(shù)用來(lái)替換“callback=?”中的callback
比如 {jsonp:"callbackOnload"},會(huì)生成"?callbackOnload=getPrice"傳給服務(wù)器端；

 var xhr = new XMLHttpRequest();

    if ("withCredentials" in xhr) {
        xhr.withCredentials = true;
    }

    xhr.open("post", "https://api.growingio.com/v2/9c75e186a1a30142/web/action?stm=1499731328375", true); //true表示異步請(qǐng)求，如果是false則是同步請(qǐng)求，

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var response = xhr.responseText;
                console.log(response)
            }
        }
    };

    xhr.send("data");

XMLHttpRequest最關(guān)鍵部分在服務(wù)器部分 ，其實(shí)無(wú)論是否跨域，服務(wù)器都是可以獲取上述請(qǐng)求的。問(wèn)題的關(guān)鍵在于服務(wù)器的回應(yīng)是否能夠返回到瀏覽器。所以在服務(wù)器發(fā)送回應(yīng)的時(shí)候，需要添加一個(gè)文件頭。這個(gè)文件頭的第一個(gè)參數(shù)是允許跨域，第二個(gè)參數(shù)是接受跨域的服務(wù)，

Access-Control-Allow-Origin:http://a.text.com

其實(shí)與不同的XMLHttpRequest還有一個(gè)小小的不同，卻很重要。同域內(nèi)的XMLHttpRequest訪問(wèn)通常只有一次請(qǐng)求，而跨域的XMLHttpRequest有兩次。

第一次XMLHttpRequest請(qǐng)求，其method是OPTIONS，并非前文定義的POST。這并不是由JS代碼控制的，而是瀏覽器來(lái)完成的操作。其作用是判斷該請(qǐng)求是否能夠被服務(wù)器所響應(yīng)。

第二次XMLHttpRequest請(qǐng)求才是真正的POST請(qǐng)求，包含了上傳的文件內(nèi)容。

這里只是對(duì) CORS 做一個(gè)簡(jiǎn)單的介紹，如果想更詳細(xì)地了解其原理的話，可以看看下面這篇文章：

阮一峰 跨域資源共享 CORS 詳解

下面介紹三種通過(guò) iframe 跨域與其它頁(yè)面通信的方式。

postMessage 是H5新增的api可以使用它來(lái)向其它的window對(duì)象發(fā)送消息，無(wú)論這個(gè)window對(duì)象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。
第一個(gè)參數(shù)是要發(fā)送的數(shù)據(jù)，第二個(gè)參數(shù)是接受消息的域，如果不想限定，可以使用通配符"*"

b.text.com域名接受消息的時(shí)候需要通過(guò)監(jiān)聽onmessage事件，來(lái)獲取傳過(guò)來(lái)的消息，消息內(nèi)容存儲(chǔ)在事件對(duì)象的data屬性中。

   window.onmessage=function (e) {
           e=e||event;
           alert(e.data);
           window.parent.postMessage("1234","*")
       }

一個(gè)頁(yè)面嵌入一個(gè)外域的iframe頁(yè)面,雖然兩個(gè)窗體之前能獲取彼此的window對(duì)象，但是卻拿不到window上的屬性和方法，例如一個(gè)http://a.text.com/index.html頁(yè)面嵌入一個(gè)http://b.text.com/index.html的iframe

嵌入的窗體跟a.text.com的域名不同，很明顯是跨域的，雖然能獲取到window對(duì)象，但是拿不到b頁(yè)面的任何方法和屬性。b頁(yè)面可以用window.parent拿到父窗體，但是也是同樣不能拿到任何方法和屬性。這個(gè)時(shí)候用document.domain可以解決這種問(wèn)題
我們?cè)赽頁(yè)面設(shè)置document.domain,在a頁(yè)面也設(shè)置document.domain,document.domain設(shè)置也是有限制的，我們只能把domain設(shè)置成自身或者更高一級(jí)的父域。主域必須相同

  document.domain="text.com";
  function dialog() {
          alert("ifram里面的方法")
      }
  window.parent.parentAlert()

我們?cè)赼頁(yè)面也設(shè)置一下domain， document.domain="text.com"; 兩個(gè)窗體之間可以正常通信了，這就是通過(guò)domain跨域獲取數(shù)據(jù)，這種方式只適合兩個(gè)窗體之前，不適合ajax請(qǐng)求；

window對(duì)象有一個(gè)name屬性，在一個(gè)窗口生命周期內(nèi)，所有載入的頁(yè)面共享這個(gè)name屬性，并且都有對(duì)這個(gè)name的讀寫權(quán)限。比如有一個(gè)頁(yè)面 http://a.text.com/index.html

 window.name="我是index頁(yè)面設(shè)置的name屬性";
  setTimeout(function () {
      window.location.;
  },3000)
  

3秒后載入了b頁(yè)面，在b頁(yè)面我們獲取window.name，成功的獲取到了index頁(yè)面設(shè)置的window.name的值，需要注意的是window.name只能是字符串形式，大小2M左右，下面就來(lái)看看具體怎樣通過(guò)window.name跨域獲取數(shù)據(jù)

在http://my.b.text.com/index.html頁(yè)面嵌入一個(gè)iframe,

 var _iframe=document.createElement("iframe");
     _iframe.src="http://b.text.com/index.html";
     _iframe.style.display="none";
     document.body.appendChild(_iframe);
 
     _iframe.onload=function () {
 
         _iframe.src="about:blank;";
 
         _iframe.onload=function () {
             alert(_iframe.contentWindow.name);
         }
     }

http://b.text.com/index.html頁(yè)面設(shè)置window.name

    window.name="iframe數(shù)據(jù)"

在http://my.b.text.com/index.html頁(yè)面請(qǐng)求http://b.text.com/index.html頁(yè)面的數(shù)據(jù)，我們可以在頁(yè)面建立一個(gè)iframe，src指向請(qǐng)求的地址，利用iframe的跨域能力
在請(qǐng)求的頁(yè)面設(shè)置window.name的值。 但是由于 my.b.text.com 頁(yè)面和該頁(yè)面 iframe 的 src 如果不同源的話，則無(wú)法操作 iframe 里的任何東西，所以就取不到 iframe 的 name 值，所以我們需要在 b.text.com 加載完后重新?lián)Q個(gè) src 去指向一個(gè)同源的 html 文件，或者設(shè)置成 "about:blank;"
改變iframe的src指向后，這個(gè)時(shí)候在監(jiān)聽iframe的onload屬性，就可以獲取到iframe的window.name屬性了；