输入banner图图片脚本导航/分类

iframe嵌套frameset,实现整个iframe框架出现滚动条,怎么样随页面内容的高度全部展示出来?_html/css_WEB-ITnose

我做的网站,是用frameset框架布局,分上中下,上面和下面框架部分的内容是固定的,中间框架内容是不同的,我想让整个框架共用一个滚动条,就用iframe嵌套frameset框架,我在iframe中设置了高度,页面内容不一样,高度也不一样了,有什么办法能让页面的内容全部展示出来?纠结两天了,很急,在线等!请各位大侠帮帮忙!


回复讨论(解决方案)

动态计算中间框架的高度,在《body onload里面加上上面、下面的高度,赋值给外面的iframe的style.height

怎么动态计算呀?请说明白一点吗?

h = document.documentElement?document.documentElement.offsetHeight:document.body.offsetHeight

这个是能子框架的页面的高度吗?

2个iframe能共用一个滚动条,好奇怪啊







<body>这个是我框架布局的页面, <br /> ------------------------------- <br /> <br /> <br /> <script language="javascript"> <br /> function iFrameHeight(iframeID){ <br /> var ifm= document.getElementById(iframeID); <br /> var subIfm = ifm.contentWindow.document.documentElement.scrollHeight; <br /> if(ifm != null && subIfm != null){ <br /> ifm.height = subIfm; <br /> } <br /> } <br /> </ script> <br /> <br /> </head> <br /> <br /> <body onmousewheel="top.document.body.scrollTop-=event.wheelDelta"> <br /> <br /> <iframe src="index.html" scrolling="no" name="frm" id="frm" width="100%" onload="iFrameHeight('frm')" /> <br /> 这个是我引入框架布局的页面 </p> <p class="sougouAnswer"> 这个是中间框架的,你再加上上、下的固定高度,然后+"px" </p> <p class="sougouAnswer"> 不是两个iframe啦 </p> <p class="sougouAnswer"> 我加了上下框架的高度,但是中间框架的页面内容不一样,高度也就不一样了,我获取不到中间页面的高度? </p> <p class="sougouAnswer"> 我加了上下框架的高度,但是中间框架的页面内容不一样,高度也就不一样了,我获取不到中间页面的高度? <br /> <br /> 不是告诉你动态计算的吗??? </p> <p class="sougouAnswer"> <p class="modified_message"> 本帖最后由 net_lover 于 2012-09-14 10:54:53 编辑 </p> 给你完整的例子 <br /> a.htm <br /> <pre class="sycode" name="code"><!DOCTYPE html><html><head><title></title></head> <body><iframe id=foo src="frameset.htm"></iframe></body></html></script></pre> <br /> <br /> frameset.htm <br /> <pre class="sycode" name="code"><frameset rows="100,*,100"><frame src="top.htm"><frame src="middle.htm"><frame src="bottom.htm"></frameset></script></pre> <br /> <br /> middle.htm <br /> <pre class="sycode" name="code"><script>function setHeight(){ h = Math.max(document.documentElement.offsetHeight,document.body.offsetHeight) window.parent.parent.document.getElementById("foo").style.height = 100+h+100 + 50+"px"; //为了保证效果,多加50}</ script><style>html,body{margin:0;padding:0}</style><body onload="setHeight()">foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/></script></pre> <br /> <br /> <br /> 注意,测试要使用http方式,不要直接说文件方式测试 </p> <p class="sougouAnswer"> 给你完整的例子 <br /> a.htm <br /> HTML code <br /> <!DOCTYPE html> <br /> <html> <br /> <head> <br /> <title></title> <br /> <br /> </head> <br /> <body> <br /> <br /> <iframe id=foo src="frameset.htm"></iframe> <br /> </body> <br /> </html> <br /> <br /> <br /> frameset.htm <br /> HTML code <br /> <frameset rows="100…… <br /> <br /> 谢谢拉 </p> <p class="sougouAnswer"> 给你完整的例子 <br /> a.htm <br /> HTML code <br /> <!DOCTYPE html> <br /> <html> <br /> <head> <br /> <title></title> <br /> <br /> </head> <br /> <body> <br /> <br /> <iframe id=foo src="frameset.htm"></iframe> <br /> </body> <br /> </html> <br /> <br /> <br /> frameset.htm <br /> HTML code <br /> <frameset rows="100…… <br /> <br /> 谢谢拉 </p> <p class="sougouAnswer"> 本帖最后由 net_lover 于 2012-09-14 10:54:53 编辑 <br /> 给你完整的例子 <br /> a.htm <br /> XML/HTML code?1234567891011<!DOCTYPE html><html><head><title></title> </head> <body> <iframe id=foo src="frameset.…… <br /> <br /> 用了你的代码,但是ie里最外侧的滚动条无法用鼠标滚轮控制,在火狐和chrome里能控制,不知道什么原因? </p> <p class="sougouAnswer"> 本帖最后由 net_lover 于 2012-09-14 10:54:53 编辑 <br /> 给你完整的例子 <br /> a.htm <br /> XML/HTML code?1234567891011<!DOCTYPE html><html><head><title></title> </head> <body> <iframe id=foo src="frameset.…… <br /> <br /> 还有获取第一个页面的高度后跳转其他页面时仍然保持第一个页面的高度,我在跳转页面中加了获取高度代码的 </div> </div> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function(){ layui.code({ elem: 'pre', //默认值为.layui-code about:false, title:'iframe嵌套frameset,实现整个iframe框架出现滚动条,怎么样随页面内容的高度全部展示出来?_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <footer class="comm-footer"> <ul class="channels"> <li> <a target="_top" href="/system/">操作系统</a> </li><li> <a target="_top" href="/down/">程序下载</a> </li><li> <a target="_top" href="/jquery/">jquery插件库</a> </li><li> <a target="_top" href="/jiaoben/">编程</a> </li><li> <a target="_top" href="/db/">数据库</a> </li><li> <a target="_top" href="/tools/">在线工具</a> </li><li> <a target="_top" href="/framebook/">框架书籍</a> </li><li> <a target="_top" href="/xitongjiaocheng/">系统教程</a> </li><li> <a target="_top" href="/ruanjianxiazai/">软件下载</a> </li> </ul> <ul class="versions"> <li> <a href="https://m.gxlcms.com" class="active">触屏版</a> </li> <li> <a href="https://www.gxlcms.com" target="_top">电脑版</a> </li> </ul> <p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></p> </footer> </body> </html>