HTML标签自适应高度的4种方法</h1> </header> <div class="entry-content"> <div class="single-content"> <div class="ad-pc ad-site"><script src=/zixun/d/js/acmsd/thea5.js></script></div>  　　介绍<p class=" ">这篇文章主要介绍了HTML<iframe>标签自适应高度的4种方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。</p> <p> <强> HTML & lt; iframe>标签是什么:</强> </p> <p> & lt; iframe>标签规定一个内联框架。</p> <p>一个内联框架被用来在当前HTML文档中嵌入另一个文档。</p> <p> <强> HTML & lt; iframe>标签怎么使用:</强> </p> <p> & lt; iframe>标签会创建包含另外一个文档的内联框架,有效地将另一个HTML页面嵌入到当前页中。请参考以下的实例:</p> <p>标记一个内联框架:</p> <pre类="刷:HTML;工具栏:假"> & lt; https://www.yisu.com/zixun/iframe的src="//www.w3cschool.cn ">
<强> HTML标签属性:</强> <br/> </p> <p> <img src="/zixun/d/file/jishu/2021-07-20/cbf9dfa4335dbceb81655ef4cfc5e9b0.jpg " alt=" HTML<iframe>标签自适应高度的4种方法"> </p> <p> <强> HTML<iframe>标签基本使用:</强> </p> <p>使用场景:页面大部分相同,少部分不一样,比如系统,每一个页面的left_nav和前内容一致,右下边内容在改变。</p> <p>优点:提高页面代码的重复使用率,让我们偷懒。</p> <p>缺点:页url面地址没有改变。</p> <p> <强> iframe高度自适应的3个方法:</强> </p> <p> iframe内容未知,高度可预测</p> <p>这个时候,我们可以给它添加一个默认的CSS的最小高度值,然后同时使用JavaScript改变高度。常用的兼容代码有:</p> <p> 1。(如果在同个顶级域名下,不同子域名之间互通信息,设置document.domain=癱aibaojian.com") </p> <pre类="刷:HTML;工具栏:假">//文档。域=癱aibaojian.com"; 　　函数setIframeHeight (iframe) { 　　如果(iframe) { 　　var iframeWin=iframe。contentWindow | | iframe.contentDocument.parentWindow; 　　如果(iframeWin.document.body) { 　　iframe。身高=iframeWin.document.documentElement。scrollHeight | | iframeWin.document.body.scrollHeight; 　　}} 　　}；　　窗口。onload=function () { 　　setIframeHeight (. getelementbyid (& # 39; external-frame& # 39;)); 　　};</pre> <p> 2。针对知道的iframe的ID调用:<br/> </p> <p>只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染HTML代码,建议使用上面的代码。</p> <pre类="刷:HTML;工具栏:假"> & lt; iframe的src=https://www.yisu.com/zixun/癰acktop.html”帧边缘=" 0 "滚动="不" ID="结构外">函数iframeAutoFit (iframeObj) { 　　setTimeout(函数(){如果(! iframeObj)返回;iframeObj.height=(iframeObj.Document ? iframeObj.Document.body.scrollHeight: iframeObj.contentDocument.body.offsetHeight);}, 200) 　　}</pre> <p> 4。打开调试运行窗口可以看到运行:</p> <pre类="刷:html;工具栏:假"> & lt; iframe的src=https://www.yisu.com/zixun/癰acktop.html”帧边缘=" 0 "滚动="不" id="测试">感谢你能够认真阅读完这篇文章,希望小编分享HTML<iframe>标签自适应高度的4种方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习! </p><h2 class="entry-title"><a href="/zixun/jishu/153533.html" target="_blank" rel="bookmark">HTML<iframe>标签自适应高度的4种方法</a></h2> </div> <div class="page-links" nowrap="nowrap"> <a href="/zixun/jishu/153532.html" rel="next"> <span>上一篇</span></a> <a href="/zixun/jishu/153534.html" rel="prev"> <span>下一篇</span></a></div> <div class="ad-pc ad-site"><script src=/zixun/d/js/acmsd/thea6.js></script></div> <div class="clear"></div> <div id="social"> <div class="social-main"> <span class="like"> <a href="JavaScript:makeRequest('/zixun/e/public/digg/?classid=2&id=153533&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');"" data-action="ding" title="我赞" class="favorite"><i class="icon-zan"></i>赞 <i class="count"> <script src=/zixun/e/public/ViewClick/?classid=2&id=153533&down=5></script></i> </a> </span> <div class="clear"></div> </div> </div> <footer class="single-footer"> <ul class="single-meta"> <li class="r-hide"><a href="javascript:pr()" onclick="javascript:this.innerHTML=(this.innerHTML=='隐藏边栏'?'显示边栏':'隐藏边栏');">隐藏边栏</a></li> </ul> <ul id="fontsize">A+</ul> <div class="single-cat-tag"> <div class="single-cat">发布日期：2021年07月20日  所属分类：<a href="/zixun/jishu/" rel="category tag">技术资讯</a></div> <div class="single-tag">标签：</div> </div> </footer> <div class="clear"></div> </div> </article> <nav class="nav-single"> <a href="/zixun/jishu/153532.html" rel="prev"><span class="meta-nav"><span class="post-nav">< 上一篇</span><br/>如何用用自定义字段设置边框颜色</span></a><a href="/zixun/jishu/153534.html" rel="next"><span class="meta-nav"><span class="post-nav">下一篇 ></span><br/>html中引用标签的作用是什么</span></a> <div class="clear"></div> </nav> <div id="related-img"> <ul> <li class="related-site"> <a href="/zixun/jishu/235549.html"><img width="234" height="177" src="/zixun/d/file/jishu/2022-01-03/d5f09ba740d3a5701e345d01ccafb604.png" class="attachment-content wp-post-image" alt="如何使用python数据可视化Seaborn绘制山脊图" /></a> <div class="related-title"><a href="/zixun/jishu/235549.html">如何使用python数据可视化Seaborn绘制山脊图</a></div> </li> <li class="related-site"> <a href="/zixun/jishu/235548.html"><img width="234" height="177" src="/zixun/d/file/jishu/2022-01-03/882a1f35581889a45711db0fa41cf334.png" class="attachment-content wp-post-image" alt="Springboot如何实现自定义mybatis拦截器" /></a> <div class="related-title"><a href="/zixun/jishu/235548.html">Springboot如何实现自定义mybatis拦截器</a></div> </li> <li class="related-site"> <a href="/zixun/jishu/235547.html"><img width="234" height="177" src="/zixun/d/file/jishu/2022-01-03/9300a3994c82194031b7364620f4a22b.jpg" class="attachment-content wp-post-image" alt="如何使用PyTorch搭建CNN实现风速预测" /></a> <div class="related-title"><a href="/zixun/jishu/235547.html">如何使用PyTorch搭建CNN实现风速预测</a></div> </li> <li class="related-site"> <a href="/zixun/jishu/235225.html"><img width="234" height="177" src="/zixun/d/file/jishu/2022-01-03/61e5cbafb18abe81a8f9fba92b902616.png" class="attachment-content wp-post-image" alt="如何使用Python自动爬取图片并保存" /></a> <div class="related-title"><a href="/zixun/jishu/235225.html">如何使用Python自动爬取图片并保存</a></div> </li> </ul> <div class="clear"></div> <div id="wumiiDisplayDiv"></div> </div> <div class="ad-pc ad-site"><script src=/zixun/d/js/acmsd/thea7.js></script></div> <div id="single-widget"> <aside id="random_post-2" class="widget widget_random_post"><h3 class="widget-title"><div class="s-icon"></div> 随机文章</h3> <div id="random_post_widget"> <ul> <li><a href="/zixun/jishu/91110.html" rel="bookmark"><i class="icon-li"></i>引导中Glyphicons图标怎么用</a></li> <li><a href="/zixun/jishu/191490.html" rel="bookmark"><i class="icon-li"></i>cocos2d-x 2.1.5安卓ndk编译环境配置</a></li> <li><a href="/zixun/jishu/153235.html" rel="bookmark"><i class="icon-li"></i>实例讲解易语言静态编译</a></li> <li><a href="/zixun/jishu/154702.html" rel="bookmark"><i class="icon-li"></i>javascript随机变色实例代码</a></li> <li><a href="/zixun/jishu/156168.html" rel="bookmark"><i class="icon-li"></i>用CSS设置记录用户密码的方法</a></li> </ul> </div> <div class="clear"></div></aside> <aside id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title"><div class="s-icon"></div>近期文章</h3> <ul> <li> <a href="/zixun/jishu/235224.html">Java中classpath怎么用</a> </li> <li> <a href="/zixun/jishu/235223.html">如何使用node快速搭建后台</a> </li> <li> <a href="/zixun/jishu/235222.html">聚合函数和group by的关系是什么</a> </li> <li> <a href="/zixun/jishu/235221.html">C语言如何实现动态内存的分配</a> </li> <li> <a href="/zixun/jishu/234914.html">SpringBoot怎么自定义Starter</a> </li> </ul> <div class="clear"></div></aside> <div class="clear"></div> </div>  </main> </div> <style type="text/css"> .wumii-footer{display:none !important;} </style> <div id="sidebar" class="widget-area"> <aside id="like_most-4" class="widget widget_like_most"><h3 class="widget-title"><p class="icon-cat"></p>大家喜欢</h3> <div id="like" class="like_most"> <ul> <li><a href="/zixun/jishu/168364.html" target="_blank">c#窗体传值代码方法</a></li> <li><a href="/zixun/jishu/160304.html" target="_blank">java判断一个数是不是回文数的方法</a></li> <li><a href="/zixun/jishu/151751.html" target="_blank">如何用帆布来绘制线条</a></li> <li><a href="/zixun/jishu/149956.html" target="_blank">Android实现轻量线性与百分比图表的方法</a></li> <li><a href="/zixun/jishu/144863.html" target="_blank">js es6系列教程——基于new.target属性与es5改造es6的类语法</a></li> <li><a href="/zixun/jishu/139654.html" target="_blank">详解tensorflow载入数据的三种方式</a></li> <li><a href="/zixun/jishu/123498.html" target="_blank">JavaScript预解释指的是什么</a></li> <li><a href="/zixun/fuwuqi/101783.html" target="_blank">这么多的linux版本的区别是什么呢?</a></li> <li><a href="/zixun/hulianwang/59417.html" target="_blank">端到端呼叫流过程回顾</a></li> <li><a href="/zixun/fuwuqi/31305.html" target="_blank">虚拟主机如何部署java项目</a></li> </ul> </div> <div class="clear"></div></aside> <div class="sidebar-roll"> <aside id="text-31" class="widget widget_text"> <div class="textwidget"><script src=/zixun/d/js/acmsd/thea2.js></script></div> <div class="clear"></div></aside> </div> <aside id="text-36" class="widget widget_text"> <div class="textwidget"><script src=/zixun/d/js/acmsd/thea3.js></script></div> <div class="clear"></div></aside><aside id="like_most-3" class="widget widget_like_most"><h3 class="widget-title"><p class="icon-cat"></p>大家喜欢</h3> <div id="like" class="like_most"> <ul> <li><a href="/zixun/jishu/184849.html" target="_blank">要!不要报表工具? ? ?</a></li> <li><a href="/zixun/jishu/174519.html" target="_blank">用JS实现一个简单的打砖块游戏</a></li> <li><a href="/zixun/jishu/161394.html" target="_blank">JS实现贪吃蛇游戏</a></li> <li><a href="/zixun/jishu/145967.html" target="_blank">MySQL中有哪些事务控制语句</a></li> <li><a href="/zixun/jishu/140415.html" target="_blank">python调用百度语音识别api</a></li> <li><a href="/zixun/jishu/135142.html" target="_blank">Dedecms V5.7中会话如何开启</a></li> <li><a href="/zixun/jishu/77320.html" target="_blank">高级定制数字监控主机(Debian + UBNT Unifi-V</a></li> <li><a href="/zixun/hulianwang/45500.html" target="_blank">腾讯会议里的文档的下载方法</a></li> <li><a href="/zixun/hulianwang/25432.html" target="_blank">mpeg指的是什么格式</a></li> <li><a href="/zixun/jishu/24279.html" target="_blank">python如何使用tkinter实现透明窗体上绘制随机出现的小球</a></li> </ul> </div> <div class="clear"></div></aside><aside id="feed-4" class="widget widget_feed"><h3 class="widget-title"><p class="icon-cat"></p>推广</h3> <script src=/zixun/d/js/acmsd/thea4.js></script> <div class="clear"></div></aside><aside id="new_cat-2" class="widget widget_new_cat"><h3 class="widget-title"><p class="icon-cat"></p>最新文章</h3> <div class="new_cat"> <ul> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229048.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/605aa13601352a82da08d10a0217b258.jpg" class="attachment-content wp-post-image" alt="怎么在SAP HANA Express Edition里进行文本分析" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229048.html" rel="bookmark">怎么在SAP HANA Express Edition里进行文本</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229047.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/6f6fb74b05a2d86d735ff442c8d406e6.jpg" class="attachment-content wp-post-image" alt="SAP BOPF和春天框架里的控制器是怎么被调用的" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229047.html" rel="bookmark">SAP BOPF和春天框架里的控制器是怎么被调用</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229046.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/1a2ac8faffe6aecae18fffde9fd0a672.jpg" class="attachment-content wp-post-image" alt="怎么将csv包含的数据导入SAP HANA MDC里云平台" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229046.html" rel="bookmark">怎么将csv包含的数据导入SAP HANA MDC里云</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229045.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/7362c605f6656e7e9f75e7bd6165d0f1.jpg" class="attachment-content wp-post-image" alt="怎么创建SAP云平台流程集成运行时服务" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229045.html" rel="bookmark">怎么创建SAP云平台流程集成运行时服务</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229044.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/6164eb19d9eef4e45343119f49175e07.jpg" class="attachment-content wp-post-image" alt="怎么在SAP云平台上创建HANA并使用" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229044.html" rel="bookmark">怎么在SAP云平台上创建HANA并使用</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229043.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/020bb9ca269ab68e893796d1287bcbf4.jpg" class="attachment-content wp-post-image" alt="访问SAP工作中心时遇到的错误信息怎么解决" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229043.html" rel="bookmark">访问SAP工作中心时遇到的错误信息怎么解决</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229042.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/453fd2536cb65720555ff51b9c2fa6a3.jpg" class="attachment-content wp-post-image" alt="SAP WebIDE OData下拉菜单里的目的地是怎么来的" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229042.html" rel="bookmark">SAP WebIDE OData下拉菜单里的目的地是怎么</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229041.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/5a134891453194f2defe331701b7bc8b.jpg" class="attachment-content wp-post-image" alt="怎么使用OData服务创建SAP C4C领先的数据" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229041.html" rel="bookmark">怎么使用OData服务创建SAP C4C领先的数据</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229040.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/9c8b033171740203f3eed7f95744ae70.jpg" class="attachment-content wp-post-image" alt="SAP UI5应用里的列表怎么处理" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229040.html" rel="bookmark">SAP UI5应用里的列表怎么处理</a></div> </li> <li> <figure class="thumbnail"> <a href="/zixun/fuwuqi/229039.html"><img width="257" height="201" src="/zixun/d/file/fuwuqi/2021-12-31/54a37d53039348003d8f1fd4d3bb3640.jpg" class="attachment-content wp-post-image" alt="SAP和狂妄自大商业里的跨组件跳转怎么实现" /></a> </figure> <div class="hot-title"><a href="/zixun/fuwuqi/229039.html" rel="bookmark">SAP和狂妄自大商业里的跨组件跳转怎么实现</a></div> </li> </ul> </div> <div class="clear"></div></aside><aside id="hot_post-4" class="widget widget_hot_post"><h3 class="widget-title"><p class="icon-cat"></p>热门文章</h3> <div id="hot_post_widget"> <ul> <li><span class='li-icon li-icon-1'>1</span><a href="/zixun/jishu/27707.html">怎么查看laravel的版本</a></li> <li><span class='li-icon li-icon-2'>2</span><a href="/zixun/jishu/169992.html">CSS实现图片列表的方法</a></li> <li><span class='li-icon li-icon-3'>3</span><a href="/zixun/jishu/119368.html">如何在Springboot中利用Mybatis-Plus实现一个单元测试功能</a></li> <li><span class='li-icon li-icon-4'>4</span><a href="/zixun/jishu/84130.html">甲骨文设置和重置的使用教程</a></li> <li><span class='li-icon li-icon-5'>5</span><a href="/zixun/fuwuqi/1431.html">ubuntu18.04内存大小的查看方法</a></li> <li><span class='li-icon li-icon-6'>6</span><a href="/zixun/jishu/151097.html">SpringBoot之logback-spring.xml不生效的解决方法</a></li> <li><span class='li-icon li-icon-7'>7</span><a href="/zixun/hulianwang/2596.html">怎么清理c盘缓存垃圾</a></li> <li><span class='li-icon li-icon-8'>8</span><a href="/zixun/fuwuqi/101609.html">windows Server2008下部署nginx</a></li> <li><span class='li-icon li-icon-9'>9</span><a href="/zixun/fuwuqi/102955.html">边缘项目| StarlingX概述和功能点详解</a></li> <li><span class='li-icon li-icon-10'>10</span><a href="/zixun/jishu/141183.html">Golang logrus日志包及日志切割的实现</a></li> </ul> </div> <div class="clear"></div></aside> </div> <div class="clear"></div> <div class="clear"></div> </div> <div id="footer-widget-box"> <div class="footer-widget"> <aside id="text-29" class="widget widget_text"> <div class="textwidget"><h3 class="widget-title"><div class="s-icon"></div>肥雀云产品</h3><div class="menu-%e9%a1%b5%e8%84%9a-container"> <ul class="menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.feiqueyun.cn/server/" target="_blank"><i class="fa-th-list fa"></i><span class="fontawesome-text"> 云服务器</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.feiqueyun.cn/idc/"><i class="fa-star-half-o fa"></i><span class="fontawesome-text"> 服务器托管</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.feiqueyun.cn/host/">云虚拟主机</a></li> </div> <div class="clear"></div></aside> <aside id="text-21" class="widget widget_text"><h3 class="widget-title"><div class="s-icon"></div>关于本站</h3> <div class="textwidget">行业资讯</div> <div class="clear"></div></aside> <div class="clear"></div> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> Copyright © 2020-2023 feiqueyun.cn. All Rights Reserved. 肥雀云_南京肥雀信息技术有限公司版权所有　南京肥雀信息技术有限公司　<a target="_blank" href="http://beian.miit.gov.cn">苏ICP备16063723号-5</a> </div> </footer> <div id="weixin-img"> <div class="weixin-img"><img src="/zixun/wp-content/themes/begin_jiudian/img/weixin.jpg" /></div> </div> <div id="share"> <div class="bdsharebuttonbox"> <a title="分享到QQ空间" href="#" class="icon-qzone" class="bds_qzone" data-cmd="qzone"></a> <a title="分享到新浪微博" href="#" class="icon-tsina" class="bds_tsina" data-cmd="tsina"></a> <a title="分享到腾讯微博" href="#" class="icon-tqq" class="bds_tqq" data-cmd="tqq"></a> <a title="分享到人人网" href="#" class="icon-renren" class="bds_renren" data-cmd="renren"></a> <a title="分享到微信" href="#" class="icon-weixin" class="bds_weixin" data-cmd="weixin"></a> <a href="#" class="icon-more" class="bds_more" data-cmd="more"></a> </div> </div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <ul id="scroll"> <li><a class="scroll-t" title="返回顶部"><i class="icon-scroll-t"></i></a></li> <li><a class="scroll-b" title="转到底部"><i class="icon-scroll-b"></i></a></li> </ul> <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279519949'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1279519949' type='text/javascript'%3E%3C/script%3E"));</script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1829acde5d5359c659ba0a8a38adca48"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type='text/javascript' src='/zixun/wp-content/plugins/wp-postviews/postviews-cache.js?ver=1.68'></script> <script type='text/javascript' src='/zixun/wp-content/themes/begin_jiudian/js/superfish.js?ver=2015.07.20'></script> </body> </html>