How to set full-screen iframe with height 100% in JavaScript ?
Last Updated :
31 Oct, 2019
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;" >
GeeksforGeeks
</ 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;" >
GeeksforGeeks
</ h1 >
< h3 >
How to change the height of a
< iframe id = "iframe" width = "100%" src =
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...