我該如何裁剪HTML中的IFrame？-html教學-PHP中文網

我該如何裁剪HTML中的IFrame？

WBOY

發布： 2023-08-29 16:33:16

轉載

873 人瀏覽過

我該如何裁剪HTML中的IFrame？

內嵌框架在 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>

登入後複製