内联框架在 HTML 中称为 iframe。 标签指定内容中的一个矩形区域，浏览器可以在其中显示带有滚动条和边框的不同文档。要在当前 HTML 文档中嵌入另一个文档，请使用内联框架。
可以使用 HTML iframe 名称属性指定 元素的引用。在 JavaScript 中，对元素的引用也是使用 name 属性进行的。 iframe 本质上用于在当前显示的网页中显示网页。包含 iframe 的文档的 URL 使用“src”属性指定。
语法
以下是 HTML
为了更好地了解如何裁剪 HTML iframe，让我们看看以下示例。
立即学习“前端免费学习笔记（深入）”；
示例
在下面，我们使用 div，使 iframe 被裁剪，并且使 iframe 的滚动不显示其输出。
当脚本执行时，它将生成一个由 iframe 组成的输出，该 iframe 被裁剪并嵌入到网页上，没有可滚动选项。
示例
考虑以下示例，我们在 iframe 中使用 div 类和 CSS 来裁剪并显示其输出。
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; }
运行上述脚本时，将弹出输出窗口，显示被裁剪并滚动显示在网页上的 iframe。
示例
执行下面的代码并观察我们如何通过运行脚本并将可滚动设置为 no 来裁剪 iframe。
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; } TutorialsPoint
The Best E-Way Learning
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';
输出
当脚本运行时，它将生成一个输出，其中包括文本以及已裁剪的 iframe，将可滚动减少为“无”。
以上就是我如何裁剪HTML中的IFrame？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551317.html
微信扫一扫 
支付宝扫一扫 
