How to change the width of an iframe to 100% using JavaScript ?
Last Updated :
18 Jan, 2023
In this article, we are given an HTML document containing an <iframe> element and the task is to change the width of the <iframe> element to 100% with the help of JavaScript. There are two methods to change the width of the iframe which are discussed below:
Method 1: This method uses the id attribute of iframe with width property to change the width of <iframe> element. JavaScript’s code is written within the <script> tag.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
How to change the width of an
iframe to 100% with JavaScript?
</ title >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
How to change the width of a < br >
to 100% with JavaScript?
</ h3 >
< iframe id = "iframe" height = "100%" width = "40%"
frameborder = "0" allowfullscreen>
</ iframe >
< br >< br >
< button onclick = "changewidth()" >
Click to change
</ button >
< script >
// JavaScript code to change the
// width to 100% of < iframe >
function changewidth() {
var x = document.getElementById('iframe');
x.style.width = "100%";
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Change the width of an iframe to 100%
Method 2: This method uses the id attribute of the iframe with window.innerWidth property to change the width of <iframe> element. JavaScript code is written within the <script> tag.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
How to change the width of an
iframe to 100% with JavaScript?
</ title >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h3 >
How to change the width of a < br >
to 100% with JavaScript?
</ h3 >
< iframe id = "iframe" height = "100%" width = "40%"
frameborder = "0" allowfullscreen>
</ iframe >
< br >< br >
< button onclick = "changewidth()" >
Click to change
</ button >
< script >
// JavaScript code to change the
// width to 100% of < iframe >
function changewidth() {
var x = document.getElementById('iframe');
x.style.width = window.innerWidth;
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Change the width of an iframe to 100%
Share your thoughts in the comments
Please Login to comment...