iframe 自適應高度終極解決方案：跨瀏覽器兼容與動態內容同步

iframe 自適應高度終極解決方案：跨瀏覽器兼容與動態內容同步

痛點分析

• 傳統 onload 僅處理初始載入，無法應對 JS 動態操作 DOM 導致的高度變化
• 跨域限制導致無法直接讀取子頁面 document.body.scrollHeight
• 各瀏覽器對 body.scrollHeight 與 documentElement.scrollHeight 表現不一

核心方案：輪詢 + 最大值取值 + 預縮容器

<iframe id="frame_content" src="page.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>

<script>
function reinitIframe() {
    var iframe = document.getElementById("frame_content");
    try {
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight); // 兼容各瀏覽器
        iframe.height = height;
    } catch (ex) {
        // 跨域異常靜默處理
    }
}
// 200ms 輪詢，效能影響極小
window.setInterval("reinitIframe()", 200);
</script>

關鍵技術點

瀏覽器測試數據

層隱藏時:  body=184, docEl=184
層展開時:  IE/FF: body=184, docEl=303 → max=303 ✓
            Opera: body=300, docEl=300 → max=300 ✓
            Safari: body=303, docEl=184 → max=303 ✓

進階優化

• 現代瀏覽器可用 postMessage 實現跨域高度通知
• ResizeObserver 監聽子頁面尺寸變化（無輪詢）
• 單頁應用（SPA）路由切換時手動觸發 reinitIframe()

此方案在傳統專案中經過大規模驗證，穩定可靠。