Bagaimanakah cara saya memangkas IFrame dalam HTML?-html tutorial-php.cn

Bagaimanakah cara saya memangkas IFrame dalam HTML?

WBOY

Lepaskan： 2023-08-29 16:33:16

ke hadapan

873 orang telah melayarinya

Bagaimanakah cara saya memangkas IFrame dalam HTML?

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

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

语法

以下是 HTML 的语法

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

Salin selepas log masuk

为了更好地了解如何裁剪 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>

Salin selepas log masuk

当脚本执行时，它将生成一个由 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>

Salin selepas log masuk

运行上述脚本时，将弹出输出窗口，显示被裁剪并滚动显示在网页上的 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>

Salin selepas log masuk

输出

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

Atas ialah kandungan terperinci Bagaimanakah cara saya memangkas IFrame dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!