點(diǎn)擊上方藍(lán)色“后端開(kāi)發(fā)雜談”關(guān)注我們, 專注于后端日常開(kāi)發(fā)技術(shù)分享

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

跨域通信的解決手段大致分為兩類(lèi):

• 一類(lèi)是 Hack. 比如通過(guò)?title,?navigation?等對(duì)象傳遞信息. JSONP可以說(shuō)是最優(yōu)秀的Hack.

• 另一類(lèi)是HTML5支持. 一個(gè)是?Access-Control-Allow-Origin?響應(yīng)頭, 一個(gè)是?window.postMessage

設(shè)置 document.domain

• 原理: 相同主域名不同子域名下的頁(yè)面, 可以設(shè)置?document.domain?讓它們同域

• 限制: 同域 document 提供的是?頁(yè)面間的互操作, 需要載入iframe頁(yè)面.

• 案例:

下面幾個(gè)域名的頁(yè)面都是可以通過(guò)?document.domain?跨域操作的:?http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar. 但只能以頁(yè)面嵌套的方式進(jìn)行頁(yè)面互操作, 比如常見(jiàn)的?iframe?方式完成頁(yè)面的嵌套.

// 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, 它對(duì)?http://b.a.com/bar?的DOM訪問(wèn)要求后者將?document.domain?往上設(shè)置一級(jí), 代碼如下:

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

注:?document.domain?只能從子域設(shè)置到主域, 往下設(shè)置以及往其他域名設(shè)置都是不允許的.

具有 src 屬性的標(biāo)簽

• 原理: 所有具有?src?屬性的HTML標(biāo)簽都是可以跨域的, 包括?,?.

• 限制: 需要?jiǎng)?chuàng)建一個(gè)DOM對(duì)象, 只能用于GET方法.

在?document.body?中?append?一個(gè)具有?src?屬性的HTML標(biāo)簽,?src?屬性值指向的 URL會(huì)以GET方法被訪問(wèn), 該訪問(wèn)是可以跨域的.

注: 其實(shí)樣式表的??標(biāo)簽也是可以跨域的, 只要有?src或href?的HTML標(biāo)簽都有跨域的能力.

不同的HTML標(biāo)簽發(fā)送HTTP請(qǐng)求的時(shí)機(jī)不同.??在更改?src?屬性時(shí)就會(huì)發(fā)送請(qǐng)求, 而 `

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。