posts - 122,  comments - 25,  trackbacks - 0
          1、目的
          系統(tǒng)通過一內(nèi)嵌頁面(iframe) 來展現(xiàn)網(wǎng)頁內(nèi)容(也包括內(nèi)嵌頁中再嵌一個網(wǎng)頁),這將會引起如下幾個問題:
          a.不同的網(wǎng)頁內(nèi)容多少不一致,導(dǎo)致iframe的高度無法與實現(xiàn)內(nèi)容或瀏覽器高度相匹配。
          b.窗口縮放時,不能iframe不能進行自動調(diào)整。

          針對這兩個問題,寫了一些js方法,使iframe自動適應(yīng)內(nèi)容或瀏覽器高度。

          2、js代碼
          在主框回頁面中包括如下js方法:
          /**
           * 內(nèi)嵌頁面的高度設(shè)置
           
          */
          function handleFrameLoad() {
           
          var hDoc = getBodyHeight(document);
           
          var tblmain =  document.getElementById('tblMain');
           
          var mFrame = window.mainFrame;
           
          var hFrameDoc = getFrameHeight(mFrame);
           
          var hTable = hDoc-80; //減去該頁面除iframe外其他控件所占的高度.
           
          if(hFrameDoc > hTable) hTable = hFrameDoc;
           tblmain.style.height 
          = hTable;
           mFrame.height 
          = hTable;
           
          if(window.mainFrame.moduleRight != null){
             
          //表示該內(nèi)嵌頁,包含內(nèi)嵌的頁面,頁iframe的id固定為moduleRight。
              initFrameHeight(mFrame,hTable);
           }
          }

          /**
           * 獲取當前頁面的高度
           
          */
          function getBodyHeight(doc){
            
          if(doc.all) return doc.body.offsetHeight;
            
          else return doc.body.scrollHeight;
          }

          /**
           * 獲取內(nèi)嵌頁中的高度.
           * 若另含子內(nèi)嵌(
          moduleRight)頁時,應(yīng)考慮該頁面的高度.
           
          */
          function getFrameHeight(mFrame){
            
          var h1 = mFrame.document.body.offsetHeight;
            
          var h2 = mFrame.document.body.scrollHeight;
            
          if(mFrame.moduleRight != null){
                
          var h3 = mFrame.moduleRight.document.body.scrollHeight;
              
          if(h3 > h2) h2 = h3;
            }
            
          return h2;
          }

          /**
           * 設(shè)置子內(nèi)嵌頁面的高度.
           * 通過設(shè)置iframe所在table的高度來調(diào)整。
           
          */
          function initFrameHeight(frame,hFrame){
            
          var tbl = frame.document.getElementById('tblMainFrame');
            tbl.style.height 
          = hFrame;
          }

          3、其他設(shè)置
          主頁面(main.jsp),在加載完畢(onload)、窗口大小調(diào)整(onresize),以及iframe的加載完畢時,需調(diào)用:handleFrameLoad,代碼如下:
          <html>
             
            
          <body onload="handleFrameLoad();" onResize="handleFrameLoad();">
             
            
          <iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/>
             
            
          </body>
          </html

          其他內(nèi)嵌頁如下(注:此處的iframe高度設(shè)為100%,其高度由父頁面通過設(shè)置table<tblMainFrame>的高度來進行調(diào)整):
          <html>
             
            
          <body class="body" style="overflow:hidden;margin:0px;padding:0px">
              
          <table width="100%" height="100%" id="tblMainFrame" border="0" align="center" cellpadding="0" cellspacing="0">
               
          <tr>
                 
          <td id='content' height=100%>
                   
          <iframe src="about:blank" width="100%" height="100%" name="moduleRight" id="moduleRight" frameborder="0" hspace="0"/>
                 
          </td>
               
          </tr>
              
          </table>
            
          </body>
          </html

          4、樣例下載: sample
          posted on 2008-01-17 13:56 josson 閱讀(9308) 評論(2)  編輯  收藏 所屬分類: web開發(fā)


          FeedBack:
          # re: iframe 高度自適應(yīng)
          2008-09-08 22:44 | cssplay
          iframe自適應(yīng)高度及其演示實例
          http://www.cssplay.org.cn/xhtml-tutorial/20080908/763.html  回復(fù)  更多評論
            
          # re: iframe 高度自適應(yīng)
          2013-12-24 21:57 | 3a教程
          1909434428@qq.com  回復(fù)  更多評論
            
          <2008年1月>
          303112345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789

          常用鏈接

          留言簿(3)

          隨筆分類

          隨筆檔案

          收藏夾

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 黄浦区| 抚顺市| 庆城县| 小金县| 全南县| 新乡市| 固阳县| 绍兴县| 海伦市| 抚州市| 尉氏县| 东阿县| 额尔古纳市| 潼南县| 天台县| 隆化县| 深水埗区| 古丈县| 侯马市| 施甸县| 额济纳旗| 渭南市| 柘荣县| 水城县| 呼伦贝尔市| 永登县| 容城县| 祁阳县| 波密县| 长治市| 辽宁省| 松溪县| 夏邑县| 浠水县| 梁平县| 沐川县| 庐江县| 东乌珠穆沁旗| 宁都县| 肇源县| 威宁|