iFrame Height 100%－Aloz 的 Oracle ERP 天地

在使用iFrame 來嵌入其他網頁時, 如果 iFrame 可以越貼近主網頁的長寬就很完美了, 原本想說, 只不過是個很簡單的 height='100%' 就可以了, 結果當然不是啦~~

可以先瞭解一下, 如何取得目前視窗的長寬資料 :

<script>
  function getInfo(){
    var s = "";
    s += "網頁可見區域寬：" + document.body.clientWidth;
    s += "網頁可見區域高：" + document.body.clientHeight;
    s += "網頁可見區域寬：" + document.documentElement.clientWidth + " (documentElement)";
    s += "網頁可見區域高：" + document.documentElement.clientHeight + " (documentElement)";
    s += "網頁可見區域寬：" + document.body.offsetWidth + " (包括邊線和捲軸的寬)";
    s += "網頁可見區域高：" + document.body.offsetHeight + " (包括邊線的寬)";
    s += "網頁正文全文寬：" + document.body.scrollWidth;
    s += "網頁正文全文高：" + document.body.scrollHeight;
    s += "網頁被捲去的高(ff)：" + document.body.scrollTop;
    s += "網頁被捲去的高(ie)：" + document.documentElement.scrollTop;
    s += "網頁被捲去的左：" + document.body.scrollLeft;
    s += "網頁正文部分上：" + window.screenTop;
    s += "網頁正文部分左：" + window.screenLeft;
    s += "螢幕解析度的高：" + window.screen.height;
    s += "螢幕解析度的寬：" + window.screen.width;
    s += "螢幕可用工作區高度：" + window.screen.availHeight;
    s += "螢幕可用工作區寬度：" + window.screen.availWidth;
    s += "你的螢幕設置是" + window.screen.colorDepth + "位元彩色";
    s += "你的螢幕設置" + window.screen.deviceXDPI + "圖元/英吋";
  }
  getInfo();
</script>

但是, 可以預期的, 各家瀏覽器所認知的結果一定不同. 在尊守 W3C 的前提之下 (頁面有添加 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> 標記)

在IE中：
document.body.clientWidth ==> BODY 寬度
document.body.clientHeight ==> BODY 高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

在FireFox中：
document.body.clientWidth ==> BODY 寬度
document.body.clientHeight ==> BODY 高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

在Chrome中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

很明顯的, 使用 document.documentElement.clientHeight 在三大瀏覽器中, 得到的結果會比較接近甚至相同 (Chrome 還是比較友善一點)

因此, 在 Header 的 Javascript 中, 就可以用以下的程式碼來達到 iFrame Height 100% 的需求

** 以下 Javascript 有套用 jQuery **

<script type='text/javascript'>
  $(document).ready(function(){
    $('#page').attr('height', document.documentElement.clientHeight - 35);
  });
</script>

1. #page 為 iframe 的 ID

2. - 35 的目的是不希望出現瀏覽器的 Scroll Bar, 可視情況調整