How do I crop an IFrame in HTML?-HTML Tutorial-php.cn

How do I crop an IFrame in HTML?

WBOY

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

forward

1141 people have browsed it

How do I crop an IFrame in HTML?

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!