讓 Iframe 高度自動調整與瀏覽器相同

在開發網頁時，常常會透過Iframe方式去鑲一個網頁內容在該頁面內去顯示其他網頁內容。若只是簡單表單或是操做倒還好，不過，今天是要顯示一篇文章時候就麻煩了，因為，想要在一個瀏覽器的可視面積可以達到最大化，讓人閱讀時候可以快速看到眾多內容，但是，IFrame的高度就不是那樣簡單控制，畢竟每個瀏覽器或者說使用者解析度不同。

就容易出現兩個scrolling bar，這樣實在不美觀，例如:
<iframe id="ifA" width="100%" height="820px" frameborder="0" src="ReplaceContentPageXX" scrolling="yes" ></iframe>

產生這樣，使用者就必須就要拉兩個Scrolling Bar，這樣對操作上是有點不友善，因此希望做到Iframe可以自動調整高度符
合瀏覽器大小，讓瀏覽器的Scrolling Bar不要出現，其原理就是讓Iframe高度去自動抓取瀏覽器可視範圍高度

1.首先這邊需引用兩個script檔案
<script src="../Scripts/jquery-latest.pack.js" type="text/javascript"></script>

<script src="../Scripts/jquery.autoheight.js" type="text/javascript"></script>
2.抓取瀏覽器高度
var Vwidth;
var Vheight;   
if (typeof window.innerWidth != 'undefined') {
    Vwidth = window.innerWidth,
    Vheight = window.innerHeight
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
    Vwidth = document.documentElement.clientWidth,
    Vheight = document.documentElement.clientHeight
}    
else {
    Vwidth = document.getElementsByTagName('body')[0].clientWidth,
    Vheight = document.getElementsByTagName('body')[0].clientHeight
}

3.抓取瀏覽器高度後，自動去設定Iframe的高度，不過這邊，因為我的高度起始值不是0開始，故還需要扣到上面留高的高度，所以要扣除111
function resizeHeight() {
    document.getElementById('ifA').height = Vheight - 111;
}

WindowsResizeHeight = function () {
    document.getElementById('ifA').height = document.documentElement.clientHeight - 111;
}

window.onresize = WindowsResizeHeight

4.Script寫好後，就是去iframe那邊設定Onload去執行此段script，這樣就會依照補滿瀏覽器方式去填寫
<iframe id="ifA" width="100%" height="820px" frameborder="0" src="ReplaceContentPageXX" scrolling="yes" onload="resizeHeight()"></iframe>

這就可以避免出現兩個scroll bar，不過，目前測試只有在IE可以正常執行，其它瀏覽器似乎還有點問題



原始文章出自於此