先來一個官方文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
iframe在web應(yīng)用刀耕火種的開發(fā)年代是非常常見的瘪板，現(xiàn)在基于Node構(gòu)建的前端應(yīng)用嵌入iframe的場景越來越少了因惭，但是在大型的web應(yīng)用中也會經(jīng)常遇見利用iframe嵌入多個前端應(yīng)用于一套前端系統(tǒng)中链沼，方便用戶在一個系統(tǒng)中去進(jìn)行業(yè)務(wù)操作灭将，而不需要在幾個不同的系統(tǒng)中來回切換软棺，好了應(yīng)用場景說了這么多，正式開始吧肠缔。
iframe可以理解為一個DOM里面插入了一個窗口級應(yīng)用忿项，iframe有自己獨立的window，iframe窗口自己內(nèi)部的邏輯操作可以獨立长豁，當(dāng)然在同域條件下钧唐，iframe窗口可以訪問父級窗口，父級窗口也可以訪問iframe窗口匠襟，跨域情況下只能通過Window.postMessage()通信的方式告訴對方自己想要的操作钝侠。
使用iframe只要能拿到父級給的參數(shù)该园，iframe內(nèi)部就可以進(jìn)行一系列操作，登錄帅韧，鑒權(quán)等里初。那怎么獲取到父級的參數(shù)就需要思考了。
大致以下幾種：
1.通過iframe的URL參數(shù)攜帶參數(shù)信息忽舟。
此方法比較簡單方便双妨，也是比較常見的方法，主系統(tǒng)也不用做額外的開發(fā)萧诫，只需要在訪問的時候斥难，動態(tài)切換URL路徑就行枝嘶，此方法不管同域跨域都可以使用帘饶。
2.同域情況下，父子級直接相互操作即可群扶，調(diào)用相應(yīng)的方法即可及刻。
- 調(diào)用函數(shù):
- 父級頁面調(diào)用子頁面的函數(shù)
name.window.func()，name為iframe的name - 子頁面調(diào)用父級頁面的函數(shù)
parent.window.func();
- 訪問頁面元素
name.window
parent.window
window都能拿到竞阐，dom缴饭，localstorage，session等還拿不到嗎骆莹？
- 注意
保證iframe已經(jīng)加載成功
3.跨域情況下就用Window.postMessage()颗搂，此方法一樣要保證iframe加載成功
直接給個例子
父窗口發(fā)消息
setIframe(){
let data = 'test' // data盡量字符串，存在兼容性問題幕垦，若要傳對象丢氢，將對象轉(zhuǎn)化為字符串再傳遞
let hcfIframe:any = document.getElementById('hcfIframe')
// iframe加載需要時間，遞歸發(fā)送消息
if(hcfIframe){
// contentWindow屬性返回<iframe>元素的Window對象先改。你可以使用這個Window對象來訪問iframe的文檔及其內(nèi)部DOM疚察。contentWindow為只讀，但是可以像操作全局Window對象一樣操作其屬性仇奶。
hcfIframe.contentWindow.postMessage(data,'http://localhost:8001/#/');
return
}else{
setTimeout(() => {
this.setIframe()
},200)
}
}
iframe窗口接收消息
//回調(diào)函數(shù)
function receiveMessageFromIframePage (event) {
console.log('receiveMessageFromIframePage', event)
}
//監(jiān)聽message事件
window.addEventListener("message", receiveMessageFromIframePage, false);
接收消息后你就可以進(jìn)行相應(yīng)的操作了貌嫡。
