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

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

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

• 一類是 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/foo, 它對?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?屬性時就會發送請求, 而 `

總結

以上是生活随笔為你收集整理的iframe嵌套页面 跨域_跨域解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。