javascript原生和jquery库实现iframe自适应高度和宽度 程序员文章站 2023-10-31 23:24:28 javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jquery的代码！ <p>javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jquery的代码！</p> <p class="cnblogscode"> </p> <pre class="brush: javascript;"> <iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></pre> <p>基于jquery库的代码很好实现：</p> <p class="cnblogscode"> </p> <pre class="brush: javascript;"> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#mainframe").load(function(){ $(this).height(0); //用于每次刷新时控制iframe高度初始化 var height = $(this).contents().height() + 10; $(this).height( height < 500 ? 500 : height ); }); }); </script></pre> <p>基于js原生代码的实现：</p> <p class="cnblogscode"> </p> <pre class="brush: javascript;"> <script language="javascript"> if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollheight;} </script></pre> <p>只需在你被iframe调用的文件</body>之后加入上面这段即可!<br> 这个也可以控制iframe的高度随内容的多而自动增长</p> <p class="cnblogscode"> </p> <pre class="brush: javascript;"> <iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollheight+20" ></iframe></pre> <p>jquery库实现iframe自适应内容高度和宽度</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/2075273.html"> Centos7.3服务器搭建LNMP环境的方法 </a> </p> <p> 下一篇： <a href="/article/2075275.html"> Linux中swap交换分区的创建和容量调整的教程 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2075274.html" target="_blank" title="javascript原生和jquery库实现iframe自适应高度和宽度"> <h2> javascript原生和jquery库实现iframe自适应高度和宽度 </h2> </a> </li> <li> <a href="/article/1213224.html" target="_blank" title="javascript原生和jquery库实现iframe自适应高度和宽度"> <h2> javascript原生和jquery库实现iframe自适应高度和宽度 </h2> </a> </li> <li> <a href="/article/787934.html" target="_blank" title="javascript原生和jquery库实现iframe自适应高度和宽度_jquery"> <h2> javascript原生和jquery库实现iframe自适应高度和宽度_jquery </h2> </a> </li> <li> <a href="/article/585942.html" target="_blank" title="javascript原生和jquery库实现iframe自适应高度和宽度_jquery"> <h2> javascript原生和jquery库实现iframe自适应高度和宽度_jquery </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>