打印

装载iframe 子页面,自适应高度

这几天刚刚做了这个东西,有网友问到,所以分享一下。
ie6、firefox2 通过,麻烦有ie7的网友测试一下,

由于有其他代码,剖析出来麻烦,截图也麻烦,代码很简单,所以就直接写部分出来好了。

假设主页面有一个div,里面放置一个iframe
<div id="frameBox">
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0"  scrolling="no"></iframe>
</div>

3个菜单链接,分别在iframe加载 1.html、2.html、3.html 三个页面。

3个子页面分别在自己页面加载完window.onload执行
function aa(){  
       var newHeight = document.body.scrollHeight + 20 + "px";       
       window.parent.document.getElementById("frameBox").style.height = newHeight;
       //以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改
       window.parent.document.getElementById("frameWin").style.height = newHeight;
}
一直在找这个  相当感谢
~~~~好东西啊
十二分的感谢你

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
做个记号
确实不错,收藏

TOP

楼主 我试了一下,在IE7下不管用。。。。哭了
你告诉我你这代码具体用法吧 我是菜鸟 难道我用错了

TOP

感谢感谢

TOP

觉得原来的方法不是很好

  • 每一个嵌进来的页面都要去修改
  • 占用了每一个嵌进来的页面的onload

所以修改了一下,把函数放在了主页面,ie6、firefox2 通过,希望ie7的网友帮忙测试
页面代码:
<div style="border:1px solid #7e99c6" id="frameBox">
       <iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe>
</div>


js脚本(加在主页面):
function test2(){
       var frameWin = document.getElementById("frameWin");
       var frameBox = document.getElementById("frameBox");
       var newHeight;
       if (frameWin.Document){
              newHeight = frameWin.Document.body.scrollHeight + 20 + "px";
       }else{
              newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
       }
       frameWin.style.height = newHeight;
       frameBox.style.height = newHeight;
}
本帖最近评分记录
  • km268 威望 +1 谢谢分享 2008-6-12 23:37

TOP

谢谢版主
再次修改一下,上面必须注意的一点是,Document必须是大写
复制内容到剪贴板
代码:
if (frameWin.Document){
      newHeight = frameWin.[color=Red]Document[/color].body.scrollHeight + 20 + "px";
}else{
      newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
}
不过这里可以用下面代码代替:
newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + "px";

TOP

frameWin.window 就可以访问了
这是访问 ifarme 下的 ifarme 的代码
window.frames["MainFarme"].window.frames["menuLeft"].LoadHTML(urldata);
http://www.qlili.com 个人站帮点啊

TOP

赶快做个记号

TOP

好帖,以前也找过这样的内容,谢谢,顶一下.
一起的力量~一起杀毒网

TOP

不错,顶一下,框架俺还不会用

TOP

这个有用 收藏了

TOP

TOP

作个记号。

TOP

真的很有用
收藏了

TOP

好,非常好..谢谢分享.

TOP

不在同一个域名下就不能用了,说没有权限,为什么呢,谁呢解决这个问题?

TOP

努力学习中

TOP

能跨域的吗?

TOP

好东西,先做个记号

TOP

嗯,留个记号。以后用得着。
宠辱不惊,闲看庭前花开花落;去留无意,漫随天外云卷云舒。

TOP

好东西 mark

TOP

还在学习,以后可能会用到做个记号 呵呵

TOP

记号~
zgue.com中国UE域名售

TOP

标记一下
ezz.cc

TOP

引用:
原帖由 playboy2925 于 2008-10-9 15:29 发表
能跨域的吗?
iframe 没有跨域问题吧,只要你引用的页面没有做特殊限制(比如自我检测是否被被人框架应用)应该可以应用任何页面的吧
跨域问题是在js中,由于同源(出于安全考虑)
我遇到的跨域就是xmldom和xmlHttprequest

怎么说呢,虽然跨域带来麻烦,但是我是支持这样做法的,毕竟这样安全些

前段时间我也做了iframe自适应,和楼主一样

我不知道楼主的20px是不是和我的一样呢
我的注释是://因为有横向滚动条会使得高度遮住20px
当然你已可以通过设置iframe的width来解决(不过不推荐这样,不符合逻辑)

[ 本帖最后由 Reany 于 2008-10-16 09:05 编辑 ]

TOP

相见恨晚啊.以前一直想找.没找着.感谢

TOP

嗯,留个记号。以后用得着
路人甲

TOP