如何裁剪 HTML iframe?

htmlweb developmentfront end technology更新于 2024/4/21 23:08:17

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

可以使用 HTML iframe 的 name 属性指定 <Iframe> 元素的引用。在 JavaScript 中，也可以使用 name 属性来引用元素。iframe 的本质是用于在当前显示的网页内显示其他网页。包含 iframe 的文档的 URL 使用 src 属性指定。

语法

以下是 HTML <iframe> 的语法

<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.cainiaomax.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 嵌入到网页中，且不带滚动选项。

示例

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

<!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.cainiaomax.com/index.htm"></iframe>
      </div>
   </body>
</html>

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

示例

执行以下代码，并观察如何通过运行脚本并将 scrollable 设置为 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.cainiaomax.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>