Dado un documento HTML que contiene un elemento <iframe> y la tarea es cambiar la altura del elemento <iframe> al 100% con la ayuda de JavaScript. Hay dos métodos para cambiar la altura del iframe que se analizan a continuación:
Método 1: este método utiliza el atributo id de iframe con la propiedad de altura para cambiar la altura del elemento <iframe>. El código JavaScript está escrito dentro de la etiqueta <script>.
<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%"
src="https://www.youtube.com/embed/hjGD08xfg9c"
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: este método utiliza el atributo id del iframe con la propiedad window.innerHeight para cambiar la altura del elemento <iframe>. El código JavaScript está escrito dentro de la etiqueta <script> .
<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=
"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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón: