Dado un documento HTML que contiene un elemento <iframe> y la tarea es cambiar el ancho del elemento <iframe> al 100% con la ayuda de JavaScript. Hay dos métodos para cambiar el ancho del iframe que se analizan a continuación:
Método 1: este método utiliza el atributo id de iframe con la propiedad de ancho para cambiar el ancho del elemento <iframe>. El código de JavaScript está escrito dentro de la etiqueta <script>.
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%"
src="https://www.youtube.com/embed/HzeK7g8cD0Y"
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>
Producción:
Método 2: este método utiliza el atributo id del iframe con la propiedad window.innerWidth para cambiar el ancho del elemento <iframe>. El código JavaScript está escrito dentro de la etiqueta <script>.
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%"
src="https://www.youtube.com/embed/HzeK7g8cD0Y"
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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA