iframe自適應高度

在網上找了2種方法，經測試都有效，最重要的是要發佈後才能看到效果，代碼以下：

<div id ="div1"> 
		 <iframe src="zencoding test.html"  frameborder="0" scrolling="no"  width='100%' id="content_iframe"  ></iframe>
		 </div>

<script>
		
		 //自適應 iframe 內容高度
        function reinitIframe() {
            var iframe = document.getElementById("content_iframe");
    
            try {
                var userAgent = window.navigator.userAgent; //取得瀏覽器的userAgent字符串
                if (userAgent.indexOf("Chrome") > -1) {
                    var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;//documentElement 不能替換成body 不然 google瀏覽器不兼容
     
                } else {
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;//documentElement 不能替換成body 不然 google瀏覽器不兼容
                 

                }

                iframe.height = bHeight;
    
            } catch (ex) {

            }
        }
        window.setInterval("reinitIframe()", 200);
		</script>

下面的是點擊加載不一樣的內容，並iframe自適應內容的高度

<div class="demo">
		<div class="opt_btn">
			<button onclick="getData('iframeH');">加載內容1</button>
			<button onclick="getData('iframeH2');">加載內容2</button>
		</div>
		<iframe src="iframeH.html" id="ifrm" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="setIframeHeight(this.id)"></iframe>
	</div>

對應的js

<script type="text/javascript"> 
function getData(ifm){
	document.getElementById("ifrm").src = ifm+'.html';
	
}
function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}
</script>

同時總結下常常用的高度
          contentWindow   兼容各個瀏覽器，可取得子窗口的 window 對象。  
          contentDocument Firefox 支持，> ie8 的ie支持。可取得子窗口的 document 對象。  
          document.body.clientWidth  可見區域內容的寬度（不包含邊框，若是水平有滾動條，不顯示所有內容的寬度）
          document.body.clientHeight 所有內容的高度（若是垂直有滾動條，也顯示所有內容的高度）
          document.body.offsetWidth  可見區域內容的寬度（含邊框，若是水平有滾動條，不顯示所有內容的寬度）
          document.body.offsetHeight 所有內容的高度（若是垂直有滾動條，也顯示所有內容的高度）
          document.body.scrollWidth  內容的寬度（含邊框,若是有滾動則是包含整個頁面的內容的寬度，即拖動滾動條後看到的全部內容）
          document.body.scrollHeight 所有內容的高度