善用 iFrame 實現微前端元件

alex.d9

更新於 2024/10/24發佈於 2024/10/23閱讀時間約 5 分鐘

ALEX.D9.DEV

iframe（內嵌框架）是HTML元素，用於在一個網頁中嵌入另一個HTML文件。它通常用於顯示外部內容，如YouTube影片、Google Maps，甚至Google One Tap 認證等快速集成服務。

Google Maps Embed

無法成為微前端主要架構

在實作微前端專案的時候，通常會選用一個主要架構，例如:

iFrame
Web Components
ModuleFederation

雖然iFrame可以用來實作微前端，但在現代的微前端技術架構中，我們幾乎不會以它成為實作微前端架構的首選。

使用iFrame實作微前端的問題

用戶體驗差

微前端的特點是讓許多分散的網頁組合在一起，讓用戶看起來像只有一個網頁一樣。但透過iframe所組合起來的網頁排版容易混亂，尤其是數量多的時候，容易讓用戶陷入某個iframe中無法離開，又或是導致用戶無一致性操作。

SEO不理想

搜尋引擎爬蟲通常無法有效索引iFrame中的內容，這會對網站的搜尋引擎優化（SEO）產生負面影響，降低頁面在搜尋結果中的排名。

性能

每個iFrame都需要獨立載入和渲染，這增加了頁面的HTTP請求數量(其中可能有很多不是你需要的HTTP請求)，可能導致載入速度變慢，特別是在大型網站中。

開發體驗差

以軟體開發彈性程度來說，iFrame是難以跟其他方法批敵的。iFrame是嵌入整個網頁，如果只需要網頁中的一小區塊(小元件)，就會導致元件提供方需要再獨立一個網頁出來(至少需要獨立另一個路徑出來)。非常容易違反軟體開發的漸進增強原則，修改大量非核心商業邏輯。

你說iFrame是專門是用來給人家組合插入的元素，但是專門做組合元件的專案不會以它為技術首選?!

iFrame仍發揮著不可忽視的作用

上面列了這麼多缺點，難道iFrame就沒有其他用處了嗎?

上面列的是iFrame在微前端架構中所面臨的問題，但是在嵌入單一複雜組件、創建隔離環境，以及實現跨界元件 中發揮著不可忽視的作用。

iFrame 常見使用場景

嵌入小型 UI 組件

如果你的iFrame內容夠小、夠通用、夠精確，那麼iFrame仍是相當方便的嵌入或分享元件的手段。

案例：

YouTube 播放器
Google 地圖或第三方表單。

這些元件可以隨插隨用，因為iFrame目前大部分瀏覽器都支援，而且導入的對象是一個完整的site，非部分元件，比較不會有只有元件載入頁面但是Http Request失效的問題。

替這些元件提供全域API

案例：

Spotiy iFrame API https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api
Youtube iFrame API
https://developers.google.com/youtube/iframe_api_reference?hl=zh-tw
WorkAdventure
https://docs.workadventu.re/developer/map-scripting/

這類API通常會跟另外iFrame元件有一定程度的相依關係，

例如:先嵌入播放器，再透過這個API去控制。

實際作法都是在瀏覽器的全域window底下新增一個一個物件，透過這物件來提供全域API。

如果仔細去看Youtube或是WA的程式，就會看到這種程式碼

window.YT = ...

window.WA = ....

iFrame雖然不適合作為主要的微前端架構，但卻非常適合用來分享小型元件。這些iFrame元件幾乎可以忽略不同瀏覽器或前端框架（如React、Vue、Angular）之間的差異，在大多數情況下都能通用。我們只需確保這些iFrame元件的切割合理，並提供適當的全域API，即可順利運作。