Cambiar fuente de iframe en JavaScript
iframe es un elemento HTML que se utiliza para mostrar un sitio web dentro de una página web con la ayuda de una URL o ruta de página. Dentro del documento HTML actual, podemos incrustar otro documento.
Para especificar el tamaño de iframe, podemos usar los atributos "height" y "width" por separado o atributos de estilo para CSS.
Sintaxis:
<iframe src="dummy_iframe.htm" height="200" width="300" title="Dummy Iframe"></iframe>
Cambiar la fuente iframe en JavaScript
La idea detrás de cambiar la fuente de iframe es cambiar la página web en la visualización de iframe. En JavaScript podemos cambiar la fuente o redefinirla con el método por defecto de JavaScript getElementById().
Podemos reasignar una nueva ruta o URL de la página web a getElementById("idOfElement").src.
Sintaxis:
getElementById('idOfElement').src = 'newPath.html'
Código de ejemplo:
<!DOCTYPE html>
<html>
<body>
<h2>Change iframe source in JavaScript</h2>
<p>Click the chosen button to view the chosen page on the website in iframe:</p>
<button onclick="myFunction('https://www.delftstack.com/')">Click to display Home</button>
<button onclick="myFunction('https://www.delftstack.com/about-us/')">Click to display About</button>
<br></br>
<script type="text/javascript">
function myFunction(path) {
document.getElementById('myIframe').src = path;
}
</script>
<iframe id="myIframe" src="https://www.delftstack.com/" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
</body>
</html>
En el código fuente anterior, hemos creado un bloque HTML iframe usando etiquetas <iframe></iframe> con ancho y alto especificados. Hemos asignado una ID al elemento iframe, y el atributo predeterminado src se asigna con la ruta "https://www.delftstack.com/".
Hemos declarado myFunction(), que recibirá la ruta como argumento. En esa función, hemos utilizado document.getElementById() que recibirá la identificación del elemento html y asignará la ruta pasada al src.
Hemos creado varios botones para cambiar la fuente de iframe y los llamamos myFunction() con la ruta en el evento de clic de esos botones.
Forma alternativa en JQuery
Hay un método predeterminado attr() en JQuery. Podemos usar ese método para establecer el atributo y el valor también. Como se muestra a continuación, también podemos usar JQuery para reasignar la fuente iframe.
Sintaxis:
$('#idOfElement').attr('src', 'https://www.delftstack.com/');
Usando el id del elemento llamado método predeterminado attr() y pasando el atributo y el valor.