HTML Iframe o marco en línea permite la incrustación de varias páginas HTML en una página HTML. En este artículo, veremos cómo cambiar el contenido de un iframe utilizando hipervínculos en otro iframe.
Esto se puede lograr mediante el uso adecuado del atributo de nombre en la etiqueta iframe y el atributo de destino en la etiqueta de anclaje . El atributo de nombre permite que cada marco en línea tenga su propio nombre único, mientras que el atributo de destino le dice a los hipervínculos dónde debe abrirse la página cuando se hace clic en el enlace. Nuestro problema se resolverá si mantenemos el valor del objetivo como el nombre del iframe de destino donde se debe mostrar el contenido del hipervínculo.
- Crearemos una página HTML que consta de dos iframes.
- Dale a cada iframe un nombre único.
- Cree otra página HTML con múltiples hipervínculos en ella.
- Agregue el nombre del segundo iframe en el atributo de destino de cada hipervínculo.
- Haga clic en los enlaces del primer iframe y debería ver las páginas que se abren en el segundo iframe.
Ejemplo: el documento HTML incrustará dos iframes en su interior.
index.html
<!DOCTYPE html> <html> <body> <center> <h2>Hello world!!</h2> <br /> <iframe src="iframe1.html" name="iframe1" width="70%" height="250"> </iframe> <br /><br /> <iframe src="" name="iframe2" width="70%" height="300"> </iframe> </center> </body> </html>
El siguiente código es el contenido de «iframe1.html» utilizado en el código anterior.
iframe1.html
<!DOCTYPE html> <html> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <p> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20210720232031/gfglogo-300x300.png" target="iframe2">GfG Logo</a> </p> <p> <a href= "https://media.geeksforgeeks.org/wp-content/uploads/20210720234436/gfglogo2-300x300.jpg" target="iframe2">GfG Logo 2</a> </p> <p> <a href= "https://www.youtube.com/embed/sa9l-dTv9Gk" target="iframe2"> GfG youtube video </a> </p> <p>click the above links to see changes in the frame below</p> </center> </body> </html>
Salida: esta página contendrá hipervínculos, cada uno dirigido al segundo iframe.
iframe a otro iframe
Publicación traducida automáticamente
Artículo escrito por laxmanbalaraman y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA