背景

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的張北網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

隨著業(yè)務(wù)的發(fā)展，自然地會(huì)有一些公共的業(yè)務(wù)被抽離成為公共組件共各個(gè)項(xiàng)目使用。但是由于各個(gè)項(xiàng)目用到的技術(shù)棧都有所不同，所以這個(gè)公共組件就不能方便地被引用了。為解決這個(gè)問題，我們把這個(gè)組件寫成了單獨(dú)的頁(yè)面掛到一個(gè)域名下，其他項(xiàng)目采用iframe或者webview的方式去加載這個(gè)頁(yè)面，從而實(shí)現(xiàn)功能的簡(jiǎn)單復(fù)用。

不過這過程中也產(chǎn)生了很多問題，單是跨域就會(huì)出現(xiàn)好幾次了。以下我將會(huì)介紹我遇到的跨域問題以及一些解決方法。

為什么會(huì)跨域

為了保證用戶信息的安全，95年的時(shí)候Netscape公司引進(jìn)了同源策略，里面的同源指的是三個(gè)相同：協(xié)議、域名、端口。
違反了同源策略就會(huì)出現(xiàn)跨域問題，主要表現(xiàn)為以下三方面：

• 無法讀取cookie、localStorage、indexDB
• DOM無法獲得
• ajax請(qǐng)求無法發(fā)送

場(chǎng)景

最近在做一個(gè)需求，需要用iframe引入一個(gè)別人封裝好的類似視頻播放器的東西。iframe里面有一個(gè)全屏的按鈕，點(diǎn)擊后需要頁(yè)面讓iframe全屏，由于受到同源策略的限制，iframe無法告訴頁(yè)面全屏。

解決辦法

設(shè)置domain

document.domain作用是獲取/設(shè)置當(dāng)前文檔的原始域部分，同源策略會(huì)判斷兩個(gè)文檔的原始域是否相同來判斷是否跨域。這意味著只要把這個(gè)值設(shè)置成一樣就可以解決跨域問題了。

在此我將domain設(shè)置為一級(jí)域名的值，a頁(yè)面url為a.demo.com，a頁(yè)面中iframe引用的b頁(yè)面url為b.demo.com，具體設(shè)置為

document.domain = 'demo.com'

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：詳解iframe跨域的幾種常用方法(小結(jié))-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/cshsoj.html