内联框架在 HTML 中称为 iframe。 </b> 标签指定内容中的一个矩形区域，浏览器可以在其中显示带有滚动条和边框的不同文档。要在当前 HTML 文档中嵌入另一个文档，请使用内联框架。</p> <p>可以使用 HTML iframe 名称属性指定 <b><Iframe></b> 元素的引用。在 JavaScript 中，对元素的引用也是使用 name 属性进行的。 iframe 本质上用于在当前显示的网页中显示网页。包含 iframe 的文档的 URL 使用“src”属性指定。</p> <h2>语法</h2> <p>以下是 HTML <iframe> 的语法</p> <pre class='brush:html;toolbar:false;'><iframe src="URL" title="description"></iframe> </pre> <p>为了更好地了解如何裁剪 HTML iframe，让我们看看以下示例。</p> <h2>示例</h2> <p>在下面，我们使用 div，使 iframe 被裁剪，并且使 iframe 的滚动不显示其输出。</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <body> <div style="position: absolute; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;"> <div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"> </div> <iframe src="https://www.tutorialspoint.com/index.htm" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; "> </iframe> </div> </body> </html></pre> <p>当脚本执行时，它将生成一个由 iframe 组成的输出，该 iframe 被裁剪并嵌入到网页上，没有可滚动选项。</p> <h2>示例</h2> <p>考虑以下示例，我们在 iframe 中使用 div 类和 CSS 来裁剪并显示其输出。</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <body> <style> iframe { position: fixed; top: -40px; left: 0; bottom: 0; right: 0; width: 65%; height: 70%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 999999; } </style> <div class="iframe"> <iframe src="https://www.tutorialspoint.com/index.htm"></iframe> </div> </body> </html></pre> <p>运行上述脚本时，将弹出输出窗口，显示被裁剪并滚动显示在网页上的 iframe。</p> <h2>示例</h2> <p>执行下面的代码并观察我们如何通过运行脚本并将可滚动设置为 no 来裁剪 iframe。</p> <pre class='brush:javascript;toolbar:false;'><!DOCTYPE html> <html> <body> <style> body { margin: 0; padding: 0; height: 100vh; } h1 { font-family: Impact, sans-serif; color: #8E44AD; } iframe { width: 1024px; height: calc(100vh - 300px); overflow: hidden; margin: 0 auto; border: none; } </style> <h1 id="tutorial">TutorialsPoint</h1> <p>The Best E-Way Learning</p> <iframe id="booking-content" title="booking-content" src="https://www.tutorialspoint.com/index.htm" scrolling="no" allowfullscreen="allowfullscreen"> </iframe> <script> let tutorial = 0; let element = document.getElementById('tutorial'); while (element.nodeName !== 'IFRAME') { tutorial += element.offsetHeight; element = element.nextElementSibling; } tutorial = window.innerHeight - tutorial - 100; document.querySelector('iframe').style.height = tutorial + 'px'; </script> </body> </html> </pre> <h2>输出</h2> <p>当脚本运行时，它将生成一个输出，其中包括文本以及已裁剪的 iframe，将可滚动减少为“无”。</p> <div style="float: right;overflow: hidden;height: 20px;line-height: 16px;font-size: 14px;color:gray;"> 来源：<a href="https://www.tutorialspoint.com/how-would-i-crop-a-html-iframe" class="aBlack" title="https://www.tutorialspoint.com/how-would-i-crop-a-html-iframe" target="_blank" rel="nofollow">https://www.tutorialspoint.com/how-would-i-crop-a-html-iframe</a> </div> </div> <div class="ngfSypBox"> <a href="https://www.jiaoben.net/article/54601.html" class="aBlue" title="">上一篇 解决golang报错：invalid operation: cannot convert 'x' (type T) to type U，解决方法</a> <a href="https://www.jiaoben.net/article/54603.html" class="aBlue" title="">下一篇 为什么在HTML5的标签列表中没有<why>，而有<is>？</a> <div class="clear"></div> </div> </div> </div> <div class="ngfXlhBox"> <div class="ngfTjzxIn"> <div class="ngfTjzxTitle"> <b></b> <h2>本类最新</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="查看更多" target="_blank" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfSpjcList"> <li> <a href="https://www.jiaoben.net/article/131824.html" class="aBlack" target="_blank" title="通过 HTML 从 Excel 获取数据：全面指南"> <span><img data-src="/uploads/20240423/17138566526627608c23409.jpg" alt="通过 HTML 从 Excel 获取数据：全面指南" class="lazyload" src="/uploads/20240423/17138566526627608c23409.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>通过 HTML 从 Excel 获取数据：全面指南</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/131992.html" class="aBlack" target="_blank" title="HTML 与 Excel 交互：读取数据详解"> <span><img data-src="/uploads/20240423/171385656966276039cf4fe.jpg" alt="HTML 与 Excel 交互：读取数据详解" class="lazyload" src="/uploads/20240423/171385656966276039cf4fe.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>HTML 与 Excel 交互：读取数据详解</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/132182.html" class="aBlack" target="_blank" title="用 HTML 读取文本文件的最佳实践"> <span><img data-src="/uploads/20240423/171385656666276036b3ac0.jpg" alt="用 HTML 读取文本文件的最佳实践" class="lazyload" src="/uploads/20240423/171385656666276036b3ac0.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>用 HTML 读取文本文件的最佳实践</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/132086.html" class="aBlack" target="_blank" title="优化文本框对齐：让你的表单更美观"> <span><img data-src="/uploads/20240423/17138565686627603807e0e.jpg" alt="优化文本框对齐：让你的表单更美观" class="lazyload" src="/uploads/20240423/17138565686627603807e0e.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>优化文本框对齐：让你的表单更美观</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/132190.html" class="aBlack" target="_blank" title="揭秘 HTML 与 CSS 的完美连接"> <span><img data-src="/uploads/20240423/171385637166275f73a9e93.jpg" alt="揭秘 HTML 与 CSS 的完美连接" class="lazyload" src="/uploads/20240423/171385637166275f73a9e93.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>揭秘 HTML 与 CSS 的完美连接</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/131929.html" class="aBlack" target="_blank" title="空 HTML 文件的创建指南"> <span><img data-src="/uploads/20240423/171385647466275fda3fc27.jpg" alt="空 HTML 文件的创建指南" class="lazyload" src="/uploads/20240423/171385647466275fda3fc27.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>空 HTML 文件的创建指南</p> </a> </li> <div class="clear"></div> </ul> </div> </div> </div> <div class="ngfRight"> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门推荐</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" target="_blank" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfJxydList"> <li> <span><a href="https://www.jiaoben.net/article/132120.html" target="_blank" title="微信网页文件如何访问"><img data-src="/uploads/20240423/1713856567662760372a002.jpg" alt="微信网页文件如何访问" class="lazyload" src="/uploads/20240423/1713856567662760372a002.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/132120.html" target="_blank" title="微信网页文件如何访问" class="aBlack">微信网页文件如何访问</a></dt> <dd> <em><b class="icon1"></b>496</em> <em><b class="icon2"></b>2024-04-23</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/132100.html" target="_blank" title="HTML 段落间距加两格"><img data-src="/uploads/20240423/171385656766276037b94bb.jpg" alt="HTML 段落间距加两格" class="lazyload" src="/uploads/20240423/171385656766276037b94bb.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/132100.html" target="_blank" title="HTML 段落间距加两格" class="aBlack">HTML 段落间距加两格</a></dt> <dd> <em><b class="icon1"></b>447</em> <em><b class="icon2"></b>2024-04-23</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/132180.html" target="_blank" title="为 SEO 优化：HTML 文件到 ZIP 压缩的终极解决方案"><img data-src="/uploads/20240423/171385617666275eb07c839.jpg" alt="为 SEO 优化：HTML 文件到 ZIP 压缩的终极解决方案" class="lazyload" src="/uploads/20240423/171385617666275eb07c839.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/132180.html" target="_blank" title="为 SEO 优化：HTML 文件到 ZIP 压缩的终极解决方案" class="aBlack">为 SEO 优化：HTML 文件到 ZIP 压缩的终极解决方案</a></dt> <dd> <em><b class="icon1"></b>446</em> <em><b class="icon2"></b>2024-04-23</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/132073.html" target="_blank" title="如何从 HTML 中读取文本文件"><img data-src="/uploads/20240423/1713856568662760382dcb0.jpg" alt="如何从 HTML 中读取文本文件" class="lazyload" src="/uploads/20240423/1713856568662760382dcb0.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/132073.html" target="_blank" title="如何从 HTML 中读取文本文件" class="aBlack">如何从 HTML 中读取文本文件</a></dt> <dd> <em><b class="icon1"></b>414</em> <em><b class="icon2"></b>2024-04-23</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/132185.html" target="_blank" title="在 HTML 中读取文本文件的简单指南"><img data-src="/uploads/20240423/171385656666276036717ed.jpg" alt="在 HTML 中读取文本文件的简单指南" class="lazyload" src="/uploads/20240423/171385656666276036717ed.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/132185.html" target="_blank" title="在 HTML 中读取文本文件的简单指南" class="aBlack">在 HTML 中读取文本文件的简单指南</a></dt> <dd> <em><b class="icon1"></b>393</em> <em><b class="icon2"></b>2024-04-23</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/132197.html" target="_blank" title="微信中的网页文件开启秘诀"><img data-src="/uploads/20240423/171385637166275f736a875.jpg" alt="微信中的网页文件开启秘诀" class="lazyload" src="/uploads/20240423/171385637166275f736a875.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/132197.html" target="_blank" title="微信中的网页文件开启秘诀" class="aBlack">微信中的网页文件开启秘诀</a></dt> <dd> <em><b class="icon1"></b>373</em> <em><b class="icon2"></b>2024-04-23</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> </ul> </div> </div> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门教程</h2> <span> <a href="https://www.jiaoben.net/articlelist" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfRmspList"> <li> <a href="https://www.jiaoben.net/article/146788.html" title="苹果14掉电快解决方法介绍" target="_blank" class="aBlack"> <span><img data-src="/uploads/20240512/1715500982664077b69771e.jpg" alt="苹果14掉电快解决方法介绍" class="lazyload" src="/uploads/20240512/1715500982664077b69771e.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>苹果14掉电快解决方法介绍</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/138812.html" title="易车如何清除个性化记录" target="_blank" class="aBlack"> <span><img data-src="/uploads/20240428/1714282921662de1a9c9580.jpg" alt="易车如何清除个性化记录" class="lazyload" src="/uploads/20240428/1714282921662de1a9c9580.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>易车如何清除个性化记录</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/141927.html" title="Word批量制作邀请函的操作过程讲解" target="_blank" class="aBlack"> <span><img data-src="/uploads/20240428/1714283821662de52df37f5.jpg" alt="Word批量制作邀请函的操作过程讲解" class="lazyload" src="/uploads/20240428/1714283821662de52df37f5.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>Word批量制作邀请函的操作过程讲解</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/138435.html" title="如何在无服务器环境中测量和优化Java函数的性能？" target="_blank" class="aBlack"> <span><img data-src="/uploads/20240423/171385538366275b970f2d6.jpg" alt="如何在无服务器环境中测量和优化Java函数的性能？" class="lazyload" src="/uploads/20240423/171385538366275b970f2d6.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何在无服务器环境中测量和优化Java函数的性能？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/144922.html" title="Edge浏览器内存占用高怎么解决" target="_blank" class="aBlack"> <span><img data-src="/uploads/20240513/17156003436641fbd7351ae.jpg" alt="Edge浏览器内存占用高怎么解决" class="lazyload" src="/uploads/20240513/17156003436641fbd7351ae.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>Edge浏览器内存占用高怎么解决</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/147649.html" title="下厨房怎么意见反馈" target="_blank" class="aBlack"> <span><img data-src="/uploads/20240510/1715326202663dccfaad410.png" alt="下厨房怎么意见反馈" class="lazyload" src="/uploads/20240510/1715326202663dccfaad410.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>下厨房怎么意见反馈</p> </a> </li> <div class="clear"></div> </ul> </div> </div> <!--热门应用 end--> </div> <!--右边 end--> <div class="clear"></div> </div> <div class="sy_footer"> <footer> <div class="footer_cont"> <div class="footcont_left"> <a href="#"> <img style="width: 300px;" src="https://www.jiaoben.net/statics/www/2020images/footer-logo.png" alt=""> </a> </div> <em class="fot_line"></em> <div class="footcont_right"> <p>版权所有：jiaoben.net Copyright 2020~2024</p> <p>本站所有软件、源码、文章均有网友提供，如有侵权联系jiaobennet@163.com</p> <p><a style="color: #999999" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2022002427号</a></p> </div> <div class="clear"></div> </div> </footer> </div> <!--右侧导航--> <div class="ngfYoucBox" id="menuRight"> <a href="https://m.jiaoben.net" class="aBlue"> <b class="icon1" style="float: none;"></b> <p>手机版</p> </a> <a href="javascript:scroll(0,0)" class="cBlack"> <b class="icon2"></b> <p>返回顶部</p> </a> </div> <!--右侧导航 end--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d7dfe7acaf9cb2eaf7c319afb7d1c287"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <div class="ngfZuocBox" id="menuLeft"> <a href="https://www.jiaoben.net/articlelist/31_1.html" title="软件教程">软件教程</a> <a href="https://www.jiaoben.net/articlelist/30_1.html" title="数据库">数据库</a> <a href="https://www.jiaoben.net/articlelist/29_1.html" title="linux">linux</a> <a href="https://www.jiaoben.net/articlelist/28_1.html" title="网络安全">网络安全</a> <a href="https://www.jiaoben.net/articlelist/25_1.html" title="MySql">MySql</a> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="HTML+CSS">HTML+CSS</a> <a href="https://www.jiaoben.net/articlelist/20_1.html" title="JavaScript">JavaScript</a> <a href="https://www.jiaoben.net/articlelist/19_1.html" title="C++">C++</a> <a href="https://www.jiaoben.net/articlelist/18_1.html" title="goLang">goLang</a> <a href="https://www.jiaoben.net/articlelist/17_1.html" title="php">php</a> <a href="https://www.jiaoben.net/articlelist/16_1.html" title="Python">Python</a> <a href="https://www.jiaoben.net/articlelist/15_1.html" title="java">java</a> </div> </body> </html>
