目录
回复讨论(解决方案)
首页 web前端 html教程 iframe嵌套frameset,实现整个iframe框架出现滚动条,怎么样随页面内容的高度全部展示出来?_html/css_WEB-ITnose

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

Jun 24, 2016 pm 12:19 PM

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


回复讨论(解决方案)

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

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

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

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

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



  
  
  

这个是我框架布局的页面, <br> ------------------------------- <br> <br> <br> &lt;script&gt; &lt;br /&gt; function iFrameHeight(iframeID){ &lt;br /&gt; var ifm= document.getElementById(iframeID); &lt;br /&gt; var subIfm = ifm.contentWindow.document.documentElement.scrollHeight; &lt;br /&gt; if(ifm != null &amp;&amp; subIfm != null){ &lt;br /&gt; ifm.height = subIfm; &lt;br /&gt; } &lt;br /&gt; } &lt;br /&gt; &lt;/script&gt; <br> <br> <br> <br> <br> <br> <iframe></iframe> <br> 这个是我引入框架布局的页面 <p class="sougouAnswer"> 这个是中间框架的,你再加上上、下的固定高度,然后+"px" </p> <p class="sougouAnswer"> 不是两个iframe啦 </p> <p class="sougouAnswer"> 我加了上下框架的高度,但是中间框架的页面内容不一样,高度也就不一样了,我获取不到中间页面的高度? </p> <p class="sougouAnswer"> 我加了上下框架的高度,但是中间框架的页面内容不一样,高度也就不一样了,我获取不到中间页面的高度? <br> <br> 不是告诉你动态计算的吗??? </p> <p class="sougouAnswer"> </p> <p class="modified_message"> 本帖最后由 net_lover 于 2012-09-14 10:54:53 编辑 </p> 给你完整的例子 <br> a.htm <br> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt; &lt;body&gt;&lt;iframe id=foo src=&quot;frameset.htm&quot;&gt;&lt;/iframe&gt;&lt;/body&gt;&lt;/html&gt;</pre><div class="contentsignin">登录后复制</div></div> <br /> <br /> frameset.htm <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;frameset rows=&quot;100,*,100&quot;&gt;&lt;frame src=&quot;top.htm&quot;&gt;&lt;frame src=&quot;middle.htm&quot;&gt;&lt;frame src=&quot;bottom.htm&quot;&gt;&lt;/frameset&gt;</pre><div class="contentsignin">登录后复制</div></div> <br /> <br /> middle.htm <br /> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script&gt;function setHeight(){ h = Math.max(document.documentElement.offsetHeight,document.body.offsetHeight) window.parent.parent.document.getElementById(&quot;foo&quot;).style.height = 100+h+100 + 50+&quot;px&quot;; //为了保证效果,多加50}&lt;/script&gt;&lt;style&gt;html,body{margin:0;padding:0}&lt;/style&gt;&lt;body onload=&quot;setHeight()&quot;&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;foo&lt;br/&gt;</pre><div class="contentsignin">登录后复制</div></div> <br> <br> <br> 注意,测试要使用http方式,不要直接说文件方式测试 <p class="sougouAnswer"> 给你完整的例子 <br> a.htm <br> HTML code <br> nbsp;html&gt; <br> <br> </p> <br> <title></title> <br> <br>   <br> <br> <br> <iframe></iframe> <br> <br> <br> <br> <br> frameset.htm <br> HTML code <br> <frameset></frameset> <br> 谢谢拉 <p class="sougouAnswer"> 给你完整的例子 <br> a.htm <br> HTML code <br> nbsp;html&gt; <br> <br> </p> <br> <title></title> <br> <br>   <br> <br> <br> <iframe></iframe> <br> <br> <br> <br> <br> frameset.htm <br> HTML code <br> <frameset></frameset> <br> 谢谢拉 <p class="sougouAnswer"> 本帖最后由 net_lover 于 2012-09-14 10:54:53 编辑 <br>             给你完整的例子 <br> a.htm <br> XML/HTML code?1234567891011nbsp;html&gt;</p> <title></title>   <iframe></iframe> <br> 用了你的代码,但是ie里最外侧的滚动条无法用鼠标滚轮控制,在火狐和chrome里能控制,不知道什么原因? <p class="sougouAnswer"> 本帖最后由 net_lover 于 2012-09-14 10:54:53 编辑 <br>             给你完整的例子 <br> a.htm <br> XML/HTML code?1234567891011nbsp;html&gt;</p> <title></title>   <iframe></iframe> <br> 还有获取第一个页面的高度后跳转其他页面时仍然保持第一个页面的高度,我在跳转页面中加了获取高度代码的
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什么。 元素?

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

HTML5中跨浏览器兼容性的最佳实践是什么?

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什么。 元素?

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什么 元素?

See all articles