• iframe高度自适应


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iframe高度自适应</title>
    <script type="text/javascript">
     //** iframe自动适应页面高度 **//
     //输入你希望根据页面高度自动调整高度的iframe的名称的列表
     //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
     //定义iframe的ID
     var iframeids=["myTestFrameID"]
     //如果用户的浏览器不支持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>

    <body>
    <iframe id="myTestFrameID" marginwidth=0 marginheight=0 frameborder=0  scrolling=no src="auto.html"></iframe>
    </body>
    </html>



  • 相关阅读:
    JSONP(处理跨域问题)
    Bootstrap 按钮
    input file 图片上传展示重新上传
    Bootstrap 表单
    Bootstrap 表格
    Bootstrap 代码
    Bootstrap 排版 文本
    bootstrap 栅格calss
    Bootsrap 直接使用
    Bootstrap3和Bootsrap4的区别
  • 原文地址:https://www.cnblogs.com/ntearn/p/1353991.html
Copyright © 2020-2023  润新知