通過js實(shí)現(xiàn)iframe 自適應(yīng)高度，實(shí)際上就是設(shè)置iframe的高度，設(shè)置等于內(nèi)嵌網(wǎng)頁的高度，從而看不到滾動(dòng)條和嵌套痕跡。對于用戶體驗(yàn)和網(wǎng)站美觀起著重要作用。我們可以通過css來給它直接定義一個(gè)高度，同樣可以實(shí)現(xiàn)上面的需求。當(dāng)內(nèi)容是未知或者是變化的時(shí)候。

iframe 自適應(yīng)高度如說是始終都調(diào)用同一個(gè)固定高度的頁面，我們直接寫iframe高度就可以了。而如果iframe要切換頁面，或者被包含頁面要做DOM動(dòng)態(tài)操作，這時(shí)候，就需要程序去同步iframe高度和被包含頁的實(shí)際高度了。

iframe 自適應(yīng)高度也就是說基于界面美觀和交互的考慮，很好的隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe。那么iframe 自適應(yīng)高度方法有哪些呢?下面就來簡單介紹一下。

子頁面不用設(shè)置，父頁面示例代碼：

<script type="text/javascript">
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
var isIE9More = !-[1] == false;
function reinitIframe(iframeId, minHeight) {
  try {
    var iframe = document.getElementById(iframeId);
    var bHeight = 0;
    if (isChrome == false && isSafari == false)
      bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = 0;
    if (isFireFox == true)
      dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
    else if (isIE == false && isOpera == false)
      dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    else if (isIE == true && isIE9More) {
      //ie9+
      var heightDeviation =
        bHeight - eval("window.IE9MoreRealHeight" + iframeId);
      if (heightDeviation == 0) {
        bHeight += 3;
      } else if (heightDeviation != 3) {
        eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
        bHeight += 3;
      }
    } //ie[6-8]、OPERA
    else bHeight += 3;
    var height = Math.max(bHeight, dHeight);
    if (height < minHeight) height = minHeight;
    iframe.style.height = height + "px";
  } catch (ex) {}
}
function startInit(iframeId, minHeight) {
  eval("window.IE9MoreRealHeight" + iframeId + "=0");
  window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}
</script>

<script type="text/javascript">
    startInit('gbook', 0);
</script>

<iframe style="width:100%;background:transparent;" src="gbook001.html"  id="gbook" name="gbook" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

以上iframe高度自適應(yīng)終極方案，兼容所有瀏覽器！