Ejemplo de Cambiar Contenido De Dos O Más Iframe Desde Un Botón
Los iframes son elementos HTML que permiten incrustar contenido externo, como páginas web, dentro de una página actual. En este artículo te mostramos cómo cambiar el contenido de dos o más iframes utilizando un solo botón mediante el uso de JavaScript.
Contenido del artículo
¿Qué es un iframe?
Un iframe es un elemento HTML que puede incrustar contenido externo en una página web. Puedes utilizar la etiqueta <iframe> para incrustar una página web, video, documento u otro contenido multimedia en tu sitio web. La estructura básica de un iframe es la siguiente:
<iframe src="URL_del_contenido" width="ancho" height="alto"></iframe>
Al utilizar JavaScript, puedes modificar dinámicamente el contenido de los iframes, lo que proporciona una experiencia de usuario más interactiva y fluida.
- Sigue en: Ejemplo de Iframe
Ejemplo de cómo cambiar contenido de múltiples iframes desde un botón
En el siguiente ejemplo de mostramos cómo cambiar el contenido de tres iframes utilizando un solo botón mediante JavaScript:
<html><head><title>Cambiar contenido de dos o más iframes desde un botón</title> <script type="text/javascript"> function cambiarContenido() { document.getElementById("iframe1").src = "nueva_pagina1.html"; document.getElementById("iframe2").src = "nueva_pagina2.html";document.getElementById("iframe3").src = "nueva_pagina3.html";//AGREGA MÁS FRAMES DE SER NECESARIO, SOLO CAMBIA EL ID Y EL URL } </script></head><body> <h1>Cambiar contenido de dos o más iframes desde un botón</h1> <p>Este ejemplo muestra cómo cambiar el contenido de tres iframes utilizando un solo botón en JavaScript.</p> <iframe id="iframe1" src="pagina1.html" width="300" height="200"></iframe> <iframe id="iframe2" src="pagina2.html" width="300" height="200"></iframe><iframe id="iframe3" src="pagina3.html" width="300" height="200"></iframe> <button onclick="cambiarContenido()">Cambiar contenido de iframes</button></body></html>
En este ejemplo, hemos creado tres iframes con identificadores iframe1 , iframe2 e iframe3 que incrustan pagina1.html, pagina2.html y pagina3.html respectivamente. Luego, hemos creado un botón que, al hacer clic, ejecuta la función cambiarContenido(). Esta función utiliza getElementById() para seleccionar cada iframe y cambiar su atributo src a las nuevas páginas nueva_pagina1.html, nueva_pagina2.html y nueva_pagina2.html.
¿Cómo citar? & Del Moral, M. (s.f.). Ejemplo de Cambiar Contenido De Dos O Más Iframe Desde Un Botón.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/24-javascript/641-ejemplo_de_cambiar_contenido_de_dos_o_mas_iframe_desde_un_boton.html