如何实现iframe(嵌入式帧)的自适应高度

2016-01-29 11:34 9 1 收藏

如何实现iframe(嵌入式帧)的自适应高度,如何实现iframe(嵌入式帧)的自适应高度

【 tulaoshi.com - Javascript 】

 

    好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。不敢独享,大家要是觉得有用,欢迎使用

源代码如下

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/javascript/)

<script type="text/javascript"
 //** iframe自动适应页面 **//

 //输入你希望根据页面高度自动调整高度的iframe的名称的列表
 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/javascript/)

 //如果用户的浏览器不支持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里面就可以了

 

来源:http://www.tulaoshi.com/n/20160129/1482665.html

延伸阅读
标签: ASP
  嵌入式Web视频点播系统实现方法    tttk(原作)      关键字     RealPlayer,嵌入式、流媒体,网络传输,PHP,DHTML,ActiveX           近年来,视频点播VOD(Video on Demand)的名字在媒体上出现得越来越多。VO...
标签: 服务器
LINUX网络嵌入式设备   这不是什么新鲜东西,无线路由器很早前就开始使用了,不过最近才慢慢理解其原理。现在网络嵌入式设备的功能越来越强大了,各芯片厂商的解决方法支持着这种复杂性。最近公司实习,做一个家庭网关的项目。下面的内容应该不算泄密吧,写得随意一点。 1.一个网络芯片架构 大家应该看得出来,这是一个D...
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢...
卧室衣柜在卧室中有着举足轻重的作用,根据卧室装修的风格搭配不同款式的、不同色彩的衣柜,在保证 其本身的使用功能以外还有更好的装饰作用。在时下的家居装修中,衣柜设计也是多样化的,开放式衣柜、 嵌入式衣柜等等,个性化的设计也给卧室生活增加不少乐趣。 嵌入式衣柜的优点就是衣柜空间大,节省室内空间,并且可以随心所欲地定制样式...
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢出”和“...

经验教程

343

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部