Given an HTML document containing an <iframe> element and the task is to change the height of the <iframe> element to 100% with the help of JavaScript. There are two methods to change the height of the iframe which are discussed below:
Method 1: This method uses id attribute of iframe with height property to change the height of <iframe> element. JavaScript code is written within the <script> tag.
<html>    <head>     <title>         How to change the height of an         iframe to 100% with JavaScript?     </title> </head>    <body style="text-align:center;">        <h1 style="color:green;">         neveropen     </h1>        <h3>         How to change the height of a         <iframe id="iframe" width="100%" height="40%"        frameborder="0" allowfullscreen>         </iframe> to 100% with JavaScript?     </h3>        <br><br>        <button onclick="changeHeight()">         Click to change     </button>       <script>               // JavaScript code to change the         // height to 100% of <iframe>         function changeHeight() {             var x = document.getElementById('iframe');             x.style.height = "100%";         }     </script> </body>   </html> |
Output:
- Before clicking the button:
- After clicking the button:
Method 2: This method uses the id attribute of the iframe with window.innerHeight property to change the height of <iframe> element. JavaScript code is written within the <script> tag.
<html>    <head>     <title>         How to change the height of an         iframe to 100% with JavaScript?     </title> </head>    <body style="text-align:center;">        <h1 style="color:green;">         neveropen     </h1>        <h3>         How to change the height of a         <iframe id="iframe" width="100%" src=         "https://www.youtube.com/embed/hjGD08xfg9c"        frameborder="0" ></iframe>         to 100% with JavaScript?     </h3>        <br><br>        <button onclick="changeHeight()">         Click to change     </button>        <script>               // JavaScript code to change the         // height to 100% of <iframe>         function changeHeight() {             var x = document.getElementById('iframe');             x.style.height = window.innerHeight;         }     </script> </body>    </html> |
Output:
- Before clicking the button:
- After clicking the button:
