Iframe 網頁嵌入導航窗口實作技巧

Iframe（內嵌框架）常用於在網頁中嵌入另一個網頁，實現頁面局部載入與導航分離。本文分享 Iframe 嵌入外部導航窗口的實作方式與注意事項。

基本語法

<iframe src="target.html" width="100%" height="500px" frameborder="0"></iframe>

導航窗口實作要點

• 父頁面與子頁面通訊：可透過 window.parent、postMessage 實現跨框架通訊
• 自適應高度：子頁面載入後，通知父頁面調整 Iframe 高度，避免雙滾動條
• 安全性限制：同源策略限制跨域操作，需設定 X-Frame-Options 或 CSP 標頭
• SEO 考量：搜尋引擎對 Iframe 內容索引有限，重要內容建議直接內嵌

樣式與屬性建議

• 設定 frameborder="0" 移除邊框
• 使用 CSS border: none; overflow: hidden; 美化外觀
• 添加 loading="lazy" 延遲載入提升效能
• 設定 sandbox 屬性限制子頁面權限（如禁止腳本、表單提交等）

適用場景

• 嵌入第三方服務（地圖、支付、表單）
• 舊系統模組化整合
• 廣告位、推薦內容隔離

圖片示意：