zoukankan      html  css  js  c++  java
  • 【转】如何实现iframe(嵌入式帧)的自适应高度

      好几次看到有人提问问到如何实现 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>里面就可以了。
          本文转载的以上代码未得到本人试验性开发测试,尚不清楚是否存在Bug,请酌情使用!

    转载说明
    作者:佚名
    网址:本文引用自http://www.shw.cn/Article/sj/wy/j/200607/33765.html

    作者对转载者要求说明(以下简称本说明):

    1、确保您已经遵守了《中华人民共和国信息网络传播权保护条例》,且必须遵守《刚刚网络作品版权声明》(若两文件有冲突内容以《中华人民共和国信息网络传播权保护条例》为准,但其他非冲突内容依然各自有效),再转载。

    2、“本说明、作者、作者博客网址及作者博客坐落,本文中提及的各种说明、备注或附录性文字”必须被转载,且不得改变其原有内容和要表达的意图!
    作者:刚刚   作者博客网址:http://lijigang.cnblogs.com/   作者博客坐落在博客园


    把握现实生活,培养自身能力
    掌握新型技术,提高自我力量

  • 相关阅读:
    request:fail parameter error: parameter.url should be String instead of Undefined;
    高性能Mysql笔记 — 索引
    机器学习 — 构建价格模型
    机器学习 — 决策树建模
    机器学习 — 文档过滤
    机器学习 — 优化
    机器学习 — 搜索及排名
    机器学习 — 发现群组
    机器学习 — 提供推荐
    docker
  • 原文地址:https://www.cnblogs.com/lijigang/p/1126777.html
Copyright © 2011-2022 走看看