iframe嵌套頁面 跨域_跨域解決方案

點選上方藍色“後端開發雜談”關注我們, 專注于後端日常開發技術分享

上一篇文章跨域資源共享我們講到了, 在跨域通路的時候出現的問題, 以及基于跨域共享的方案解決跨域的問題, 那麼還有沒有其他的技術手段解決跨域的問題呢, 本篇文章一一列舉解決跨域問題的所使用的技術手段.

跨域通信的解決手段大緻分為兩類:

• 一類是 Hack. 比如通過 

  title

  , 

  navigation

   等對象傳遞資訊. JSONP可以說是最優秀的Hack.
• 另一類是HTML5支援. 一個是 

  Access-Control-Allow-Origin

   響應頭, 一個是 

  window.postMessage

設定 document.domain

• 原理: 相同主域名不同子域名下的頁面, 可以設定 

  document.domain

   讓它們同域
• 限制: 同域 document 提供的是 

  頁面間的互操作

  , 需要載入iframe頁面.
• 案例:

下面幾個域名的頁面都是可以通過 

document.domain

 跨域操作的: 

http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar

. 但隻能以頁面嵌套的方式進行頁面互操作, 比如常見的 

iframe

 方式完成頁面的嵌套.

// URL http://a.com/foolet ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar';
ifr.onload = function(){let ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementById("foo").innerHTML;
};
ifr.style.display = 'none';document.body.appendChild(ifr);
           

注意: 上述代碼所在的URL是 

http://a.com/fo

o, 它對 

http://b.a.com/bar

 的DOM通路要求後者将 

document.domain

 往上設定一級, 代碼如下:

// URL http://b.a.com/bardocument.domain = 'a.com'
           

注: 

document.domain

 隻能從子域設定到主域, 往下設定以及往其他域名設定都是不允許的.

具有 src 屬性的标簽

• 原理: 所有具有 

  src

   屬性的HTML标簽都是可以跨域的, 包括  ,  .
• 限制: 需要建立一個DOM對象, 隻能用于GET方法.

在 

document.body

 中 

append

 一個具有 

src

 屬性的HTML标簽, 

src

 屬性值指向的 URL會以GET方法被通路, 該通路是可以跨域的.

注: 其實樣式表的 

 标簽也是可以跨域的, 隻要有 

src或href

 的HTML标簽都有跨域的能力.

不同的HTML标簽發送HTTP請求的時機不同. 

 在更改 

src

 屬性時就會發送請求, 而 `