打印

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

本主题由 cloudgamer 于 2009-12-25 08:44 加入精华
这几天刚刚做了这个东西,有网友问到,所以分享一下。
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

确实不错,收藏

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