內嵌框架在 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？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
