<em id="hanht"></em>

    <dd id="hanht"></dd>

    <em id="hanht"><acronym id="hanht"></acronym></em>
    
    <button id="hanht"></button>
    <rp id="hanht"><object id="hanht"><blockquote id="hanht"></blockquote></object></rp><em id="hanht"></em>

    首頁 > 設計 > WEB開發 > 正文

    如何實現iframe(嵌入式幀)的自適應高度

    2020-10-03 17:39:57
    字體:
    來源:轉載
    供稿:網友

    好幾次看到有人提問問到如何實現 iframe 的自適應高度,能夠隨著頁面的長度自動的適應以免除頁面和 iframe 同時出現滾動條的現象,剛好我在工作中也碰到了類似問題,于是上網翻查,東抄抄西看看,弄出來這么一個函數,貼到頁面里面就能用了。不敢獨享,大家要是覺得有用,歡迎使用

    源代碼如下

    <script type="text/javascript">
     //** iframe自動適應頁面 **//

     //輸入你希望根據頁面高度自動調整高度的iframe的名稱的列表
     //用逗號把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一個窗體,則不用逗號。

     //定義iframe的ID
     var iframeids=["test"]

     //如果用戶的瀏覽器不支持iframe是否將iframe隱藏 yes 表示隱藏,no表示不隱藏
     var iframehide="yes"

     function dyniframesize()
     {
      var dyniframe=new Array()
      for (i=0; i<iframeids.length; i++)
      {
       if (document.getElementById)
       {
        //自動調整iframe高度
        dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
        if (dyniframe[i] && !window.opera)
        {
         dyniframe[i].style.display="block"
         if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用戶的瀏覽器是NetScape
          dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
         else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用戶的瀏覽器是IE
          dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
        }
       }
       //根據設定的參數來處理不支持iframe的瀏覽器的顯示問題
       if ((document.all || document.getElementById) && iframehide=="no")
       {
        var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
        tempobj.style.display="block"
       }
      }
     }

     if (window.addEventListener)
     window.addEventListener("load", dyniframesize, false)
     else if (window.attachEvent)
     window.attachEvent("onload", dyniframesize)
     else
     window.onload=dyniframesize
    </script>

    使用的時候只要貼在<head></head>里面就可以了

    ----------------------------------------------------
    ITlearner注:本人測試此代碼確實有效。
    ----------------------------------------------------

    發表評論 共有條評論
    用戶名: 密碼:
    驗證碼: 匿名發表