首页 / 知识

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

2023-04-13 15:15:00

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><p><i class="icon-biaoqian iconfont"></i><a href="/list/kongjian2.html" title="空间" class="c1" target="_blank">空间</a><a href="/list/xianshi.html" title="显示" class="c1" target="_blank">显示</a><a href="/list/jiojuefangfa.html" title="解决方法" class="c1" target="_blank">解决方法</a><a href="/list/gundongtiao.html" title="滚动条" class="c1" target="_blank">滚动条</a></p> <p class="share"><b>免责声明：</b>本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。</p> </div> </div> <div class="whitebg"> <h2 class="htitle">最新内容</h2> <div class="new-link-notice"> <ul class="new-link"> <script src="/data/new.js"></script> </ul> </div> </div> <div class="whitebg"> <h2 class="htitle">相关内容</h2> <ul class="other-link"> <li><a href="/zhishi/eQDD.html" target="_blank"><i><img src="/d/img/202313/ty47.webp" alt="Python 多线程死锁问题的巧妙解决"></i><p>Python 多线程死锁问题的巧妙解决</p><span>Python 多线程死锁问题的巧妙解决方法，异常，持有，代码，情况，信息，管理，数据，包装，策略，预期，死锁死锁的原理非常简单，用一句话就可以描述完。</span></a></li><li><a href="/zhishi/eQJF.html" target="_blank"><i><img src="/d/img/202313/ty49.webp" alt="python命名空间和作用域"></i><p>python命名空间和作用域</p><span>python命名空间和作用域，异常，代码，第一，第三，培训，名称，名字，空间，作用，模块，命名空间表示标识符(identifier)的可见范围，当前命名空间主要是</span></a></li><li><a href="/zhishi/eQ8G.html" target="_blank"><i><img src="/d/img/202313/tongyong2.webp" alt="Python 命名空间的访问"></i><p>Python 命名空间的访问</p><span>Python 命名空间的访问，名字，培训，模块，空间，函数，示例，变量，局部，全局，语句，1、局部命名空间可以locals()BIF来访问。locals返回一个名字/值</span></a></li><li><a href="/zhishi/eQCs.html" target="_blank"><i><img src="/d/img/202313/ty62.webp" alt="python 粘包解决方法"></i><p>python 粘包解决方法</p><span>python 粘包解决方法，数据，数字，网络，报头，培训，长度，字节，内容，格式，详细信息，问题的根源在于，接收端不知道发送端将要传送的字节流的长度，所</span></a></li><li><a href="/zhishi/eQBt.html" target="_blank"><i><img src="/d/img/202313/ty63.webp" alt="python安装lxml模块时发生错误解决"></i><p>python安装lxml模块时发生错误解决</p><span>python安装lxml模块时发生错误解决方法，网上，资料，代码，培训，系统，版本，模块，文件名，命令，内联，失败原因及解决方法总结如下：1.pip版本未更新</span></a></li><li><a href="/zhishi/eQIX.html" target="_blank"><i><img src="/d/img/202313/ty39.webp" alt="python导入dlib时出错解决方法"></i><p>python导入dlib时出错解决方法</p><span>python导入dlib时出错解决方法，时报，培训，系统管理员，以上，提示，错误，原因，发现，更多，内容，python中导入dlib出错的原因：没有安装dlib库。解决</span></a></li><li><a href="/zhishi/eQ2r.html" target="_blank"><i><img src="/d/img/202313/tongyong8.webp" alt="Python怎么设置代理"></i><p>Python怎么设置代理</p><span>Python怎么设置代理，代理，数据，标准，综合，地址，环境，培训，都会，字段，全局，python设置代理的方法：HTTP代理本质上是一个Web应用，它和其他普通Web</span></a></li><li><a href="/zhishi/eQpk.html" target="_blank"><i><img src="/d/img/202313/ty40.webp" alt="python空格怎样设置"></i><p>python空格怎样设置</p><span>python空格怎样设置，代码，培训，空格，括号，语句，条件，冒号，分号，前面，周围，Python最具特色的是用缩进来标明成块的代码。我下面以if选择结构来</span></a></li><li><a href="/zhishi/eQjQ.html" target="_blank"><i><img src="/d/img/202313/ty40.webp" alt="python为什么不显示none"></i><p>python为什么不显示none</p><span>python为什么不显示none，信息，培训，赋值，参数，变量，方法，数据类型，函数，对象，语句，下面是关于Python中None的一些解释：None是一个特殊的常量。</span></a></li><li><a href="/zhishi/eQoA.html" target="_blank"><i><img src="/d/img/202313/ty57.webp" alt="python如何显示中文字体"></i><p>python如何显示中文字体</p><span>python如何显示中文字体，地方，培训，文件，方法，之后，中文字体，中文，模块，声明，时候，python显示中文字体的方法：在这里，你可以选择2种不同的解决</span></a></li><li><a href="/zhishi/eQs8.html" target="_blank"><i><img src="/d/img/202313/ty50.webp" alt="python怎么清空管理空间"></i><p>python怎么清空管理空间</p><span>python怎么清空管理空间，情况，管理，名称，培训，对象，赋值，别名，内存，变量，语句，关于Python中的内存释放问题首先就不得不提到Python解释器在何</span></a></li><li><a href="/zhishi/eQt5.html" target="_blank"><i><img src="/d/img/202313/ty70.webp" alt="python如何显示当前路径"></i><p>python如何显示当前路径</p><span>python如何显示当前路径，项目，名字，设计，培训，平台，路径，脚本，语言，绝对路径，新功能，python是一种跨平台的计算机程序设计语言。是一种面向对</span></a></li></ul> </div> </div> <div class="rbox"> <div class="whitebg paihang"> <h2 class="htitle">热门文章</h2> </div> <div class="whitebg tuijian"> <h2 class="htitle">推荐文章</h2> </div> <div class="whitebg cloud"> <h2 class="htitle">标签云</h2> <ul> </ul> </div> <div class="whitebg wenzi"> <h2 class="htitle">猜你喜欢</h2> <ul> <script type="text/javascript" src="/data/rand.js"></script> </ul> </div> </div> </article> <footer> <div class="footer_wrap"> <div class="footer_tool fr"> <a href="javascript:;" class="footer_phone"><em class="iconfont icon-shouji"></em><div class="qrcode ts"><img src="/css/qrcode/?str=https://m.jsk.cc/" alt="计算客"><p>扫码手机访问</p></div></a> <div class="wxbox"><div class="footer_icon"><img src="/css/img/icon.png"></div></div> </div> <div class="endnav"> <p>公益性知识科普性站点，所涵盖的内容、图片等数据系，部分原创内容未能与原作者取得联系。</p> <p>若涉及版权问题，请联系（kkyves#163.com / wechat: jisuanke2022），我们第一时间进行删除/修改！</p> </div> </div> <a href="#"><div class="top icon-retop iconfont"></div></a> <div class="footer_copyright"> <div class="container"> <span> Copyright © <a href="https://www.jsk.cc" target="_blank">计算客</a> @2023 jsk.cc <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn">蜀ICP备2023033106号-2</a> </span> <i class="fr">计算客 · 开发知识</i> </div> </div> </footer> <script type="text/javascript" src="/css/js/theia-sticky-sidebar.min.js"></script> <script type="text/javascript" src="/css/js/tool.min.js"></script> <script type="text/javascript" src="/css/js/like.ajax.js"></script> </body> </html>