無邊框 iframe 能實現頁面局部無刷新更新，但固有的高度固定特性導致內容溢出或留白，嚴重影響體驗。本文提供三種經過實戰驗證的自適應高度方案，覆蓋同域、跨域、多 iframe 等場景。

方案一：原生 JS 同域自適應（經典版）

原理：父頁面通過 iframe.contentDocument.body.offsetHeight 或 iframe.Document.body.scrollHeight 獲取子頁面實際高度，賦予 iframe。

function SetWinHeight(obj) {
  var win = obj;
  if (document.getElementById) {
    if (win && !window.opera) {
      if (win.contentDocument && win.contentDocument.body.offsetHeight) {
        win.height = win.contentDocument.body.offsetHeight;
      } else if (win.Document && win.Document.body.scrollHeight) {
        win.height = win.Document.body.scrollHeight;
      }
    }
  }
}

調用方式（iframe 必須帶 onload 與 id）：

<iframe width="778" align="center" height="200" id="win" name="win"
  onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>

方案二：子頁面主動上報（超簡單同域版）

前提：iframe src 與父頁面同域（否則拋出「拒絕訪問」跨域錯誤）。

1. 創建 bottom.js（僅兩行）：

   parent.document.all("iframeID").style.height = document.body.scrollHeight;
   parent.document.all("iframeID").style.width = document.body.scrollWidth;
   

2. 所有被嵌入頁面引入：<script src="bottom.js"></script>
3. 父頁面 iframe 設置 ID：<iframe id="iframeID" ...></iframe>

原理：子頁面加載完成執行腳本，直接操作父頁面 DOM 設置 iframe 尺寸。WinXP + IE6 驗證通過。

方案三：通用多 iframe 管理器（健壯版）

支持多個 iframe、自動檢測瀏覽器類型、兼容不支持 iframe 的舊瀏覽器顯示控制。

<script type="text/javascript">
// 配置區
var iframeids = ["test"]; // 多個用逗號分隔：["frame1", "frame2"]
var iframehide = "yes"; // 不支持 iframe 時是否隱藏：yes/no

function dyniframesize() {
  var dyniframe = new Array();
  for (i = 0; i < iframeids.length; i++) {
    if (document.getElementById) {
      dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
      if (dyniframe[i] && !window.opera) {
        dyniframe[i].style.display = "block";
        if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) {
          dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; // NS/Firefox/Chrome
        } else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) {
          dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; // IE
        }
      }
    }
    // 舊瀏覽器顯示控制
    if ((document.all || document.getElementById) && iframehide == "no") {
      var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
      tempobj.style.display = "block";
    }
  }
}

// 事件綁定兼容寫法
if (window.addEventListener) window.addEventListener("load", dyniframesize, false);
else if (window.attachEvent) window.attachEvent("onload", dyniframesize);
else window.onload = dyniframesize;
</script>

跨域場景終極方案：postMessage API

現代瀏覽器（IE8+）支持 window.postMessage 安全跨域通信：

子頁面：parent.postMessage(document.body.scrollHeight, '*')
父頁面：監聽 message 事件，驗證來源後設置 iframe 高度。
此方案解決「不同域/協議/端口」下的自適應難題，是當前最佳實踐。

避坑檢查清單

• ✅ iframe 與父頁同域（方案一/二）或配置 postMessage（跨域）
• ✅ 子頁面無 overflow:hidden 導致 scrollHeight 異常
• ✅ 子頁面圖片/字體加載完成後再計算高度（圖片 onload 觸發重算）
• ✅ CSS Reset 統一盒模型，避免 margin collapse 導致高度誤差
• ✅ 動態內容（AJAX 載入、Accordion 展開）觸發重新計算機制

Trackback: CSDN 原文