Home > Article > Web Front-end > How do I crop an IFrame in HTML?
How do I crop an IFrame in HTML?
- WBOYforward
- 2023-08-29 16:33:16935browse
Inline frames are called iframes in HTML. The tag specifies a rectangular area within the content where the browser can display different documents with scroll bars and borders. To embed another document within the current HTML document, use inline frames.
You can use the HTML iframe name attribute to specify a reference to the element. In JavaScript, references to elements are also made using the name attribute. An iframe is essentially used to display a web page within the currently displayed web page. The URL of the document containing the iframe is specified using the "src" attribute.
grammar
The following is the syntax of HTML
<iframe src="URL" title="description"></iframe>
To better understand how to crop an HTML iframe, let’s look at the following example.
Example
Below, we use a div so that the iframe is clipped and so that the scrolling of the iframe does not show its output.
<!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>
When the script executes, it will generate an output consisting of an iframe that is cropped and embedded on the web page without the scrollable option.
Example
Consider the following example where we use div class and CSS in an iframe to crop and display its output.
<!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>
When running the above script, the output window will pop up, showing the iframe that is cropped and scrolled on the web page.
Example
Execute the code below and observe how we crop the iframe by running the script and setting scrollable to no.
<!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>
Output
When the script runs, it will produce an output that includes the text as well as the iframe that has been cropped, reducing scrollable to None.
The above is the detailed content of How do I crop an IFrame in HTML?. For more information, please follow other related articles on the PHP Chinese website!