4行代码搞定iframe高度自动变化,完美兼容

引用

一个iframe高度自动变化的问题搞了我半天，网上找了下资料，不是很好，结合了一下jquery(版本1.3.2)，4行代码即可，完美兼容IE、Firefox、Opera、Safari、Google Chrome,js如下:

 
function  heightSet(thisFrame){
      if($.browser.mozilla || $.browser.msie){
          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
      }else{
          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
          //这行可代替上一行，这样heightSet函数的参数可以省略了
          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
      }
       document.getElementById("thisFrameId").height=bodyHeight;  
}

引用

第一次发帖,还请指教

[quote现在j2ee做web系统，大部分都离不开iframe，除非你全用ajax，但是ajax到处使用但如果用得不好的话，肯定会一大堆问题。唉!技术有限，只能跟着造造轮子

 <iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src="" onload="heightSet(this)">
      </iframe>

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题，如果你ajax用得特别多,但又不想每次都去设置，那动态改变iframe肯定达不到你的代码清洁要求，没办法，要么你就脱离iframe。我只能说说一般处理方式，毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

parent.window.heightSet();

评论

24 楼 danny.chiu 2011-01-05  

完美兼容谈何容易，一个页面里面有若干iframe，且随着内容高度随时变化时，很难控制，以前解决方案是setInterval。但iframe迟早会被模板替代，因为它的缺点太多，不能提前加载公用js库是最让人难以接受的。

23 楼 wdhdd889 2010-12-15  

getjack 写道

引用

一个iframe高度自动变化的问题搞了我半天，网上找了下资料，不是很好，结合了一下jquery(版本1.3.2)，4行代码即可，完美兼容IE、Firefox、Opera、Safari、Google Chrome,js如下:

 
function  heightSet(thisFrame){
      if($.browser.mozilla || $.browser.msie){
          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
      }else{
          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
          //这行可代替上一行，这样heightSet函数的参数可以省略了
          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
      }
       document.getElementById("thisFrameId").height=bodyHeight;  
}

引用

第一次发帖,还请指教

[quote现在j2ee做web系统，大部分都离不开iframe，除非你全用ajax，但是ajax到处使用但如果用得不好的话，肯定会一大堆问题。唉!技术有限，只能跟着造造轮子

 <iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src="" onload="heightSet(this)">
      </iframe>

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题，如果你ajax用得特别多,但又不想每次都去设置，那动态改变iframe肯定达不到你的代码清洁要求，没办法，要么你就脱离iframe。我只能说说一般处理方式，毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

parent.window.heightSet();

22 楼 凤凰山 2010-12-15  

<script type="text/javascript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
var iframeids=["mainshow","leftshow"]
//如果用户的浏览器不支持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);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe 的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
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>

21 楼 huaishk 2010-12-15  

freej 写道

我前一阵正在找这个问题的解决方案。LZ，你在转载他人成果的时候最好显式声明下。

这个方法可行，但是不够好，而且跨域的时候就失效了。

跨域的时候无法得到iframe的document元素。见：http://www.w3schools.com/jsref/prop_frame_contentdocument.asp

20 楼 jorneyR 2010-12-13  

getjack 写道

wdq 写道

我觉得楼主还是做个简单的，应用小示例，效果比较好！

没问题，兼容绝对没问题

汗，兼容没问题，也要写个使用示例。
只说没有太大的用处。

19 楼 getjack 2010-12-13  

wdq 写道

我觉得楼主还是做个简单的，应用小示例，效果比较好！

没问题，兼容绝对没问题

18 楼 clue 2010-12-13  

hejianhuacn 写道

不是全屏打开浏览器，然后再全屏问题好像就有了

可以监听window # resize事件，然后重新执行一次，做到动态适应

17 楼 hyj1254 2010-12-13  

参见"利用location.hash实现跨域iframe自适应高宽": 
http://ued.alimama.com/front-end/use-location-hash-to-auto-sizing/ 

这个思路不错。

16 楼 liusong1111 2010-12-13  

dengjianqiang200 写道

freej 写道

我前一阵正在找这个问题的解决方案。LZ，你在转载他人成果的时候最好显式声明下。

这个方法可行，但是不够好，而且跨域的时候就失效了。

跨域要怎么解决呢？

参见"利用location.hash实现跨域iframe自适应高宽":
http://ued.alimama.com/front-end/use-location-hash-to-auto-sizing/

终极解决方案是html5一统江湖后，使用里面的postMessage。

15 楼 wdq 2010-12-13  

我觉得楼主还是做个简单的，应用小示例，效果比较好！

14 楼 mercyblitz 2010-12-13  

bishen 写道

直接CSS不就得了
body  {height:100%}
iframe{height:100%}

。。。 两码事，人家是设置iframe的动态的，你的是配置！

13 楼 bishen 2010-12-13  

直接CSS不就得了
body  {height:100%}
iframe{height:100%}

12 楼 hejianhuacn 2010-12-13  

不是全屏打开浏览器，然后再全屏问题好像就有了

11 楼 mercyblitz 2010-12-13  

buru 写道

这个不一定可以解决问题的 要看你的heightSet何时执行 还要看程序是不是异步

不明白，能不能举个例子。

PS：据我了解JS没有异步（多线程）功能，Ajax并不是异步。

10 楼 dengjianqiang200 2010-12-13  

freej 写道

我前一阵正在找这个问题的解决方案。LZ，你在转载他人成果的时候最好显式声明下。

这个方法可行，但是不够好，而且跨域的时候就失效了。

跨域要怎么解决呢？

9 楼 getjack 2010-12-13  

freej 写道

我前一阵正在找这个问题的解决方案。LZ，你在转载他人成果的时候最好显式声明下。

这个方法可行，但是不够好，而且跨域的时候就失效了。

老兄，你去看看电影<<社交网络>>

8 楼 getjack 2010-12-13  

jorneyR 写道

还缺少使用范例。
1. 怎么调用heightSet ：thisFrame参数是什么
2. window.frames["thisFrameName"]: "thisFrameName"代表什么意思，怎么会在代码里写死了呢？
3. 至少还缺少一个hello world的使用
4. 限制条件
等等

你说得有理

7 楼 getjack 2010-12-13  

buru 写道

这个不一定可以解决问题的 要看你的heightSet何时执行 还要看程序是不是异步

这跟程序异步没有关系，若果你要在其他页面调用 parent.window.heightSet()搞定

6 楼 getjack 2010-12-13  

xinyu198736 写道

lz,设置高度的时候还是用style比较标准哇哇....你这个很简单,而且不通用....

完美兼容几乎所有浏览器，已测

5 楼 xinyu198736 2010-12-12  

lz,设置高度的时候还是用style比较标准哇哇....你这个很简单,而且不通用....