詳解iframe跨域的幾種常用方法(小結(jié))
背景
隨著業(yè)務(wù)的發(fā)展，自然地會(huì)有一些公共的業(yè)務(wù)被抽離成為公共組件共各個(gè)項(xiàng)目使用。但是由于各個(gè)項(xiàng)目用到的技術(shù)棧都有所不同，所以這個(gè)公共組件就不能方便地被引用了。為解決這個(gè)問題，我們把這個(gè)組件寫成了單獨(dú)的頁面掛到一個(gè)域名下，其他項(xiàng)目采用iframe或者webview的方式去加載這個(gè)頁面，從而實(shí)現(xià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)擊后需要頁面讓iframe全屏，由于受到同源策略的限制，iframe無法告訴頁面全屏。
解決辦法
設(shè)置domain
document.domain作用是獲取/設(shè)置當(dāng)前文檔的原始域部分，同源策略會(huì)判斷兩個(gè)文檔的原始域是否相同來判斷是否跨域。這意味著只要把這個(gè)值設(shè)置成一樣就可以解決跨域問題了。
在此我將domain設(shè)置為一級(jí)域名的值，a頁面url為a.demo.com，a頁面中iframe引用的b頁面url為b.demo.com，具體設(shè)置為
document.domain = 'demo.com'
設(shè)置完之后，在a頁面的window上掛載使iframe全屏的方法
// a頁面
window.toggleFullScreen = () => {
// do something
}
在b頁面上可以直接獲取到a頁面的window對(duì)象并直接調(diào)用
// b頁面 window.parent.toggleFullScreen()
但是這個(gè)值的設(shè)置也有一定限制，只能設(shè)置為當(dāng)前文檔的上一級(jí)域或者是跟該文檔的URL的domain一致的值。如url為a.demo.com，那domain就只能設(shè)置為demo.com或者a.demo.com。因此，設(shè)置domain的方法只能用于解決主域相同而子域不同的情況。
使用中間頁面
我們還可以使用一個(gè)與a頁面同域名但不同路由的c頁面作為中間頁面，b頁面加載c頁面，c頁面調(diào)用a頁面的方法，從而實(shí)現(xiàn)b頁面調(diào)用a頁面的方法。具體操作如下：
在a頁面的node層新開一個(gè)路由，此路由加載一個(gè)c頁面作為中間頁面，c頁面的url為a.demo.com/c。c頁面只是一個(gè)簡單的html頁面，在window的onload事件上調(diào)用了a頁面的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload = function () {
parent.parent.toggleFullScreen();
}
</script>
</body>
</html>
由于c頁面和a頁面是符合同源策略的，所以可以避開跨域問題，執(zhí)行全屏的方法。
postmessage
window.postMessage方法可以安全地實(shí)現(xiàn)跨源通信，寫明目標(biāo)窗口的協(xié)議、主機(jī)地址或端口就可以發(fā)信息給它。
// b頁面 parent.postMessage( value, "http://a.demo.com" );
// a頁面
window.addEventListener("message", function( event ) {
if (event.origin !== 'http://b.demo.com') return;
toggleFullScreen()
});
為了安全，收到信息后要檢測(cè)下event.origin判斷是否要收信息的窗口發(fā)過來的。
總結(jié)
通過以上的方法，我們就可以和iframe自由通信啦。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
SlideView 圖片滑動(dòng)(擴(kuò)展/收縮)展示效果
滑動(dòng)展示效果主要用在圖片或信息的滑動(dòng)展示，也可以設(shè)置一下做成簡單的口風(fēng)琴（Accordion）效果。2010-08-08
JavaScript知識(shí)點(diǎn)總結(jié)之如何提高性能
JavaScript的性能問題不容小覷，這就需要我們開發(fā)人員在編寫JavaScript程序時(shí)多注意一些細(xì)節(jié)，本文非常詳細(xì)的介紹了一下JavaScript性能優(yōu)化方面的知識(shí)點(diǎn)，絕對(duì)是干貨，需要的朋友快來一起學(xué)習(xí)吧2016-01-01
這篇文章主要介紹了js中的this作用域全解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
在html頁面中顯示時(shí)間是很常見的，實(shí)現(xiàn)的方法有很多，下面為大家簡單介紹兩種方式，有需求的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
js實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
原生javascript實(shí)現(xiàn)圖片輪播效果代碼
前幾天用jquery做了一個(gè)JS的圖片輪播效果，現(xiàn)在用原生的javascript代碼實(shí)現(xiàn)同樣的功能，當(dāng)練習(xí)用吧，代碼寫得不是很滿意。2010-09-09
小程序上傳文件至云存儲(chǔ)的實(shí)現(xiàn)
在小程序云開發(fā)中，要實(shí)現(xiàn)上傳文件至云存儲(chǔ)，有兩種方案：云函數(shù)和HTTP?API，本文主要講講如何使用HTTP?API實(shí)現(xiàn)小程序外上傳文件至云存儲(chǔ)，感興趣的可以了解一下2022-01-01
Javascript和jquery在selenium的使用過程
這篇文章主要介紹了Javascript和jquery在selenium的使用過程,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
JavaScript中的finally()方法和Filter()方法詳解
finally是 JavaScript 構(gòu)造中使用的方法try-catch,Filter() 是 JavaScript 中的一種方法,可以通過處理數(shù)組輕松提供過濾后的輸出數(shù)據(jù),本文就給大家詳細(xì)的介紹一下JavaScript中的finally()方法和Filter()方法,需要的朋友可以參考下2023-08-08
滾動(dòng)條想必大家都見過吧，在本文將使用div來模擬滾動(dòng)條的效果，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-10-10