关于javascript：让iframe占用垂直空间

Making an iframe take vertical space

我想让iframe占用其显示内容而不显示滚动条所需的垂直空间。有可能吗？

有什么解决方法吗？

这应该将IFRAME高度设置为其内容的高度：

1
2
3

您可能想在IFRAME中添加scrolling="no"以关闭滚动条。

编辑：糟糕，忘记声明the_height。

还请检查以下线程：DiggBar如何根据不在其域上的内容来动态调整其iframe的高度？

它解决了相同的问题。

解决方法是不要在服务器端使用</wyn>和预处理代码。 </p> <hr> <p> 在<wyn>IFRAME</wyn>源文档中添加<wyn>DOCTYPE</wyn>声明将有助于从该行计算正确的值 </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer">document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'the_iframe'</span><span class="br0">)</span>.<span class="me1">contentWindow</span>.<span class="me1">document</span>.<span class="me1">body</span>.<span class="me1">scrollHeight</span></div></td></tr></tbody></table></div> <p> 有关示例，请参见W3C DOCTYPE </p> <p> IE和FF都存在问题，因为它以"怪癖"模式呈现<wyn>IFRAME</wyn>文档，直到添加<wyn>DOCTYPE</wyn>。 </p> <p> FF / IE / Chrome支持：.scrollHeight无法与Chrome一起使用，因此我想出了一个使用jQuery的javascript示例，用于根据iframe内容设置页面上的所有<wyn>IFRAME</wyn>高度。注意：这是您当前域内的参考页面。 </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br /></div></td><td><div class="javascript codecolorer"><span class="sy0"><</span>script type<span class="sy0">=</span><span class="st0">"text/javascript"</span><span class="sy0">></span><br />     $<span class="br0">(</span>document<span class="br0">)</span>.<span class="me1">ready</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span><br />         $<span class="br0">(</span><span class="st0">'iframe'</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span><br />             <span class="kw1">var</span> context <span class="sy0">=</span> $<span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span><br />             context.<span class="me1">load</span><span class="br0">(</span><span class="kw1">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span> <span class="co1">// attach the onload event to the iframe  </span><br />                 <span class="kw1">var</span> body <span class="sy0">=</span> $<span class="br0">(</span><span class="kw1">this</span>.<span class="me1">contentWindow</span>.<span class="me1">document</span><span class="br0">)</span>.<span class="me1">find</span><span class="br0">(</span><span class="st0">'body'</span><span class="br0">)</span><span class="sy0">;</span><br />                 <span class="kw1">if</span> <span class="br0">(</span>body.<span class="me1">length</span> <span class="sy0">></span> <span class="nu0">0</span> <span class="sy0">&&</span> $<span class="br0">(</span>body<span class="br0">)</span>.<span class="me1">find</span><span class="br0">(</span><span class="st0">'*'</span><span class="br0">)</span>.<span class="me1">length</span> <span class="sy0">></span> <span class="nu0">0</span><span class="br0">)</span> <span class="br0">{</span> <span class="co1">// check if iframe has contents</span><br />                     context.<span class="me1">height</span><span class="br0">(</span>$<span class="br0">(</span>body.<span class="kw1">get</span><span class="br0">(</span><span class="nu0">0</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">height</span><span class="br0">(</span><span class="br0">)</span> <span class="sy0">+</span> <span class="nu0">20</span><span class="br0">)</span><span class="sy0">;</span><br />                 <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span><br />                     context.<span class="me1">hide</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="co1">// hide iframes with no contents</span><br />                 <span class="br0">}</span><br />             <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span><br />         <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span><br />     <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div> <hr> <p> 此CSS代码段应删除垂直滚动条： </p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="javascript codecolorer">body <span class="br0">{</span><br />   overflow<span class="sy0">-</span>x<span class="sy0">:</span> hidden<span class="sy0">;</span><br />   overflow<span class="sy0">-</span>y<span class="sy0">:</span> hidden<span class="sy0">;</span><br /> <span class="br0">}</span></div></td></tr></tbody></table></div> <p><center> </center></p> <p> 我尚不确定它是否会占用所需的垂直空间，但我会看看是否能解决。 </p> <hr></div></td> </tr> </tbody> </table></article> <script> window.onload=function(){ var imgs = document.getElementsByTagName('img'); for(var i = 0;imgs[i];i++){ var thttp = imgs[i].getAttribute('src').indexOf("http"); var tok = imgs[i].getAttribute('src').indexOf("//"); if(thttp == -1 || tok == -1) {imgs[i].setAttribute('src', 'https://www.ezd.cc' + (imgs[i].getAttribute('src') || ''));} } } </script> <div class="entry-meta"> <div class="articleinfo-tag"><i class="iconfont icon-biaoqian"></i><a href="/tags/kongjian.html" title="空间" class="c1" target="_blank">空间</a><a href="/tags/xianshi.html" title="显示" class="c1" target="_blank">显示</a><a href="/tags/jiojuefangfa.html" title="解决方法" class="c1" target="_blank">解决方法</a><a href="/tags/gundongtiao.html" title="滚动条" class="c1" target="_blank">滚动条</a></div> </div> </div> <div class="relatebox"> <div class="relatebox-lists"> <h3>推荐阅读<span></span></h3> <div class="relatebox-articles"> <ul> <article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc7O.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030506/x4ysjpxeczi36.webp" alt="win10多任务按键怎么设置在底部详细方法" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc7O.html" title="win10多任务按键怎么设置在底部详细方法">win10多任务按键怎么设置在底部详细方法</a></h2> </div> <p class="text-muted meta">win10多任务按键怎么设置在底部详细方法，按键,任务，在使用电脑时候，任务视图按钮被用户们从键盘上不小心的移除了，导致使用起来非常的不方便</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc7J.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/76.webp" alt="怎么设置电脑桌面|怎么设置电脑桌面壁纸" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc7J.html" title="怎么设置电脑桌面|怎么设置电脑桌面壁纸">怎么设置电脑桌面|怎么设置电脑桌面壁纸</a></h2> </div> <p class="text-muted meta">怎么设置电脑桌面|怎么设置电脑桌面壁纸，，怎么设置电脑桌面壁纸方法/步骤分步阅读1/7鼠标右键点击桌面，选择个性化选项，进入个性化设置界面</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc71.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/56.webp" alt="中联吊车电脑显示器图解|中联吊车电脑说明书" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc71.html" title="中联吊车电脑显示器图解|中联吊车电脑说明书">中联吊车电脑显示器图解|中联吊车电脑说明</a></h2> </div> <p class="text-muted meta">中联吊车电脑显示器图解|中联吊车电脑说明书，，1. 中联吊车电脑说明书低速挡起步，行走后就转换高速挡（往上），换挡时去掉高速挡再换挡（往下），挂完挡</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc7q.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/36.webp" alt="固定路由器如何设置固定无线路由器设置教程" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc7q.html" title="固定路由器如何设置固定无线路由器设置教程">固定路由器如何设置固定无线路由器设置教程</a></h2> </div> <p class="text-muted meta">固定路由器如何设置固定无线路由器设置教程，，如今我们的智能手机、平板电脑、笔记本、超级本等等都需要WiFi无线网络的支持，今天小编入手了</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc7j.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/2.webp" alt="如何链接路由器设置TP链接无线路由器设置" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc7j.html" title="如何链接路由器设置TP链接无线路由器设置">如何链接路由器设置TP链接无线路由器设置</a></h2> </div> <p class="text-muted meta">如何链接路由器设置TP链接无线路由器设置，，不管是什么品牌的无线路由器，首先第一步都是硬件安装，主要涉及的是将网线将电脑、（俗称猫）以及电脑</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6Y.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/98.webp" alt="icloud设置哪些该打开|icloud在设置哪里打开" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6Y.html" title="icloud设置哪些该打开|icloud在设置哪里打开">icloud设置哪些该打开|icloud在设置哪里打</a></h2> </div> <p class="text-muted meta">icloud设置哪些该打开|icloud在设置哪里打开，，icloud设置哪些该打开iCloud是苹果公司推出的一款云服务系统，我们可以通过自己的苹果ID进行</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6U.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/19.webp" alt="酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6U.html" title="酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网">酷派手机恢复出厂设置|酷派手机恢复出厂设</a></h2> </div> <p class="text-muted meta">酷派手机恢复出厂设置|酷派手机恢复出厂设置后上不了网，，酷派手机恢复出厂设置后上不了网恢复出厂设置后开不了机处理方法：　　1、手机彻底</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6O.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/82.webp" alt="电脑关机后显示器灯还亮|电脑关机后显示器灯还亮着一按键盘就开机是怎么回事" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6O.html" title="电脑关机后显示器灯还亮|电脑关机后显示器灯还亮着一按键盘就开机是怎么回事">电脑关机后显示器灯还亮|电脑关机后显示器</a></h2> </div> <p class="text-muted meta">电脑关机后显示器灯还亮|电脑关机后显示器灯还亮着一按键盘就开机是怎么回事，，1. 电脑关机后显示器灯还亮着一按键盘就开机是怎么回事由于</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6C.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/61.webp" alt="电脑网页打开页面不全怎么办|电脑网页打开后显示不全" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6C.html" title="电脑网页打开页面不全怎么办|电脑网页打开后显示不全">电脑网页打开页面不全怎么办|电脑网页打开</a></h2> </div> <p class="text-muted meta">电脑网页打开页面不全怎么办|电脑网页打开后显示不全，，1. 电脑网页打开后显示不全网页显示不全的解决方法有：方法一：重新设置IE浏览器（1）点击</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6B.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/37.webp" alt="设置证书密码是什么|证书初始密码" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6B.html" title="设置证书密码是什么|证书初始密码">设置证书密码是什么|证书初始密码</a></h2> </div> <p class="text-muted meta">设置证书密码是什么|证书初始密码，，设置证书密码是什么证书密码是可以修改的，可以在企业网银上修改，也可以到银行网点修改。到网点修改要带</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc68.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/4.webp" alt="设置里程碑|设置里程碑的方法有哪些" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc68.html" title="设置里程碑|设置里程碑的方法有哪些">设置里程碑|设置里程碑的方法有哪些</a></h2> </div> <p class="text-muted meta">设置里程碑|设置里程碑的方法有哪些，，1. 设置里程碑的方法有哪些1、通过挑战风险，突破认知，从而突破自我。只有在某些特殊的时刻，比如想法和</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6v.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030508/fdzxnfrtcbz49.webp" alt="计算机主板BIOS设置详细-BIOS知识" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6v.html" title="计算机主板BIOS设置详细-BIOS知识">计算机主板BIOS设置详细-BIOS知识</a></h2> </div> <p class="text-muted meta">计算机主板BIOS设置详细-BIOS知识，，什么是电脑BIOS，一般电脑主板已经设置完毕后，电脑就开始按del键进入BIOS。系统启动BIOS，即微机的基本输入</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6k.html" class="thumbnail"><span><img class="thumb" src="https://www.ezd.cc/d/jc/2023030508/5yawfx2gegf05.webp" alt="金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6k.html" title="金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?">金蝶k3入如何设置公式|金蝶K3中计量单位该</a></h2> </div> <p class="text-muted meta">金蝶k3入如何设置公式|金蝶K3中计量单位该如何设置呢?，，1.金蝶K3中计量单位该如何设置呢?1。计量单位组计量单位组分无换算、浮动换算、</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc6c.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/57.webp" alt="苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc6c.html" title="苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置">苹果电脑麦克风设置|苹果电脑允许麦克风在</a></h2> </div> <p class="text-muted meta">苹果电脑麦克风设置|苹果电脑允许麦克风在哪里设置，，1. 苹果电脑允许麦克风在哪里设置1、苹果电脑麦克风没声音是接口或是设置的问题。2、</p> </article><article class="excerpt excerpt-one"> <p class="focuss"><a href="/zs/Lc5V.html" class="thumbnail"><span><img class="thumb" src="https://www.gonglue1.com/static/img/no/3.webp" alt="win7电脑分屏|win7电脑分屏两个显示器怎么切换" /></span></a></p> <div class="title"> <h2><a href="/zs/Lc5V.html" title="win7电脑分屏|win7电脑分屏两个显示器怎么切换">win7电脑分屏|win7电脑分屏两个显示器怎么</a></h2> </div> <p class="text-muted meta">win7电脑分屏|win7电脑分屏两个显示器怎么切换，，1. win7电脑分屏两个显示器怎么切换1、打开电脑程序找到并点击控制面板的命令。2、点击控</p> </article></ul> </div> </div> </div> </div> </div> <footer class="footer"> <p>Copyright © 2023 易知道 ezd.cc All Rights Reserved</p> <p><a href="https://beian.miit.gov.cn/">京ICP备19020253号-3</a></p> </footer> </body> </html>