我如何裁剪HTML中的IFrame？

百变鹏仔 3个月前 (09-22) #HTML

文章标签 HTML

内联框架在 HTML 中称为 iframe。标签指定内容中的一个矩形区域，浏览器可以在其中显示带有滚动条和边框的不同文档。要在当前 HTML 文档中嵌入另一个文档，请使用内联框架。

可以使用 HTML iframe 名称属性指定元素的引用。在 JavaScript 中，对元素的引用也是使用 name 属性进行的。 iframe 本质上用于在当前显示的网页中显示网页。包含 iframe 的文档的 URL 使用“src”属性指定。

语法

以下是 HTML 的语法

<iframe src="URL" title="description"></iframe>

为了更好地了解如何裁剪 HTML iframe，让我们看看以下示例。

立即学习“前端免费学习笔记（深入）”；

示例

在下面，我们使用 div，使 iframe 被裁剪，并且使 iframe 的滚动不显示其输出。

<!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>

当脚本执行时，它将生成一个由 iframe 组成的输出，该 iframe 被裁剪并嵌入到网页上，没有可滚动选项。

示例

考虑以下示例，我们在 iframe 中使用 div 类和 CSS 来裁剪并显示其输出。

<!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>

运行上述脚本时，将弹出输出窗口，显示被裁剪并滚动显示在网页上的 iframe。

示例

执行下面的代码并观察我们如何通过运行脚本并将可滚动设置为 no 来裁剪 iframe。

<!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>

输出

当脚本运行时，它将生成一个输出，其中包括文本以及已裁剪的 iframe，将可滚动减少为“无”。

文章推荐

我如何裁剪HTML中的IFrame？

语法

示例

示例

示例

输出

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8