通过js实现iframe 自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。

iframe 自适应高度如说是始终都调用同一个固定高度的页面，我们直接写iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

iframe 自适应高度也就是说基于界面美观和交互的考虑，很好的隐藏了iframe的border和scrollbar，让人看不出它是个iframe。那么iframe 自适应高度方法有哪些呢?下面就来简单介绍一下。

子页面不用设置，父页面示例代码：

<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高度自适应终极方案，兼容所有浏览器！