微前端是最近幾年火起來的概念，iframe是早期實(shí)現(xiàn)微前端的理想方案，而現(xiàn)在有了其它的方案，比如qianduan框架，single-spa，以及webpack5帶來的聯(lián)邦模塊方案。但是每一個(gè)方案都有其優(yōu)缺點(diǎn)，感興趣的可以去實(shí)踐一下。

1、項(xiàng)目創(chuàng)建

創(chuàng)建3個(gè)項(xiàng)目，一個(gè)基座項(xiàng)目project_base，2個(gè)子項(xiàng)目project_a和project_b項(xiàng)目。并在各個(gè)項(xiàng)目安裝好依賴（本項(xiàng)目基于vue搭建）。

projects目錄.png

2、項(xiàng)目基本結(jié)構(gòu)

在基座項(xiàng)目里創(chuàng)建一個(gè)路由文件如iframe.vue，我們?cè)谶@個(gè)文件里完成project_a，project_b等子項(xiàng)目的訪問。

iframe.png

3、項(xiàng)目路由

每個(gè)項(xiàng)目分別管理自己的路由。但是需要在基座項(xiàng)目路由里注冊(cè)管理。待訪問的時(shí)候?qū)崟r(shí)監(jiān)聽路由信息判斷訪問的是哪個(gè)項(xiàng)目。

project_base_route.png

4、項(xiàng)目需要解決的一些問題。

iframe的使用有很多坑，有些好解決，有些只能忍受。比如：
1、項(xiàng)目之間的通訊
2、iframe的彈窗及遮罩層問題
3、iframe里的全屏問題
4、組件復(fù)用問題
5、瀏覽器的前進(jìn)后退問題

5、項(xiàng)目通訊問題

只能使用postMessage方法來完成基座項(xiàng)目和子項(xiàng)目之間的通訊。

6、iframe里的全屏問題

全屏方案，原生方法使用的是 Element.requestFullscreen()，插件：vue-fullscreen。當(dāng)頁面在 iframe 里面時(shí)，全屏?xí)?bào)錯(cuò)，且 dom 結(jié)構(gòu)錯(cuò)亂。
解決方案：iframe 標(biāo)簽設(shè)置 allow="fullscreen" 屬性即可

6、localStorage共享問題

跨域時(shí)候localStorage是無法共享數(shù)據(jù)的。我們可以采用：cross-storage插件

7、公共組件復(fù)用

公共組件可以單獨(dú)提出來放到一個(gè)單獨(dú)的項(xiàng)目里，這里是components項(xiàng)目，在components項(xiàng)目把公共組件全部暴露出來供其它項(xiàng)目安裝使用，也就是說主項(xiàng)目和子項(xiàng)目可以選擇性安裝需要的組件。參考文章：多個(gè)前端項(xiàng)目中公共組件使用方案（npm包方式） 。如下圖，在project_base項(xiàng)目里安裝了整個(gè)components項(xiàng)目里的組件。

components.png

8、瀏覽器前進(jìn)/后退問題

iframe 和主頁面共用一個(gè)瀏覽歷史，iframe 會(huì)影響頁面的前進(jìn)后退。并且 iframe 頁面刷新會(huì)重置，因?yàn)闉g覽器的地址欄沒有變化，iframe 的 src 也沒有變化。這個(gè)問題暫時(shí)也沒解決，還需研究。

9、項(xiàng)目地址

完整的項(xiàng)目請(qǐng)?jiān)L問：github地址，如果對(duì)你點(diǎn)用處，可以點(diǎn)個(gè)start。