数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何裁剪 HTML IFrame？
内联框架被称为 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://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 嵌入到网页中，没有可滚动选项。
示例
考虑以下示例，我们使用 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://tutorialspoint.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://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，将可滚动选项减少为 no。
更新时间： 2023年11月24日
3K+ 浏览量
广告