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

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

js通過script標簽引入一個外域的資源是不受限制的，jsonp就是利用這個原理，來實現(xiàn)跨域的。

callback是前后臺約定的查詢參數(shù)，服務器端返回一個能執(zhí)行的js文件，這個js文件是調用callback對應的參數(shù)值即getPrice執(zhí)行，并且返回對應的數(shù)據(jù)，我們可以在getPrice方法里面來處理返回的數(shù)據(jù)，最終返回的結果如下

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

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

 $.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請求，jsonp只能是get請求，在jquery中jsonpCallback可以省略不寫，jquery會自動生成一個全局函數(shù)替換callback=對應的全局函數(shù)，取到數(shù)據(jù)會自動銷毀這個全局函數(shù)；jsonp參數(shù)用來替換“callback=?”中的callback
比如 {jsonp:"callbackOnload"},會生成"?callbackOnload=getPrice"傳給服務器端；

 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表示異步請求，如果是false則是同步請求，

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

    xhr.send("data");

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

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

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

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

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

這里只是對 CORS 做一個簡單的介紹，如果想更詳細地了解其原理的話，可以看看下面這篇文章：

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

下面介紹三種通過 iframe 跨域與其它頁面通信的方式。

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

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

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

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

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

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

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

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

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

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

在http://my.b.text.com/index.html頁面嵌入一個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頁面設置window.name

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

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