Introducción: un iframe se utiliza para mostrar una página web (o posiblemente un documento) dentro de una página web, es decir, carga el contenido de una página (o documento) dentro de la página actual.
Sintaxis del marco flotante:
<iframe src="URL"></iframe>
Enfoque 1: para agregar div adicionales en un iframe, debe usar un div contenedor, que envuelve el contenido de su div previsto y el iframe en una unidad. De esta manera, puede mostrar el contenido de su div junto con el iframe incrustado en el documento/página web.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> How to place a div inside an iframe for IE? </title> </head> <body> <h2>Div in an Iframe</h2> <div id="container" style="border: solid 2px #000;"> <iframe height="500px" width="100%" name="iframe_a"> </iframe> <div> <h2>This goes in the iframe</h2> <h1> This is another heading </h1> </div> <!-- Put all your contents of the div here --> </div> <p><a href="https://ide.geeksforgeeks.org/" target="iframe_a"> Click Here </a> </p> </body> </html>
Producción:
Explicación: El div con id = «contenedor» es el envoltorio/contenedor para el iframe y el contenido del div, por lo tanto, el contenido del div se muestra junto con el iframe.
Enfoque 2: otra forma de manejar el problema es usar el iframe en sí mismo para mostrar el contenido del div en lugar de mostrarlo junto con el iframe. Sin embargo, de esta forma, el iframe solo muestra el contenido del div o de la página web/documento en cualquier momento, por lo que este enfoque es un poco limitado.
Sintaxis:
<iframe srcdoc="div goes here"></iframe>
Ejemplo:
<!DOCTYPE html> <html> <head> <title> How to place a div inside an iframe for IE? </title> </head> <body> <h2>Div in an Iframe</h2> <div id="container" style= "border: solid 2px #000;"> <iframe srcdoc="<div> <h2>This goes in the iframe</h2> </div>" height="500px" width="100%" name="iframe_a"> </iframe> <!-- Put all your contents of the div here --> </div> <p><a href="https://ide.geeksforgeeks.org/" target="iframe_a"> Click Here </a> </p> </body> </html>
Producción:
Explicación: En el ejemplo anterior, el iframe muestra el div que contiene el texto: «Esto va en el iframe», y cada vez que se hace clic en el enlace «Haga clic aquí», el iframe carga la página de URL de destino en el iframe, sobrescribiendo el div que estaba presente antes. Hacer esto cargaría la página de Wikipedia, sin embargo, para mostrar el contenido del div nuevamente, necesitaría volver a cargar la página.
Publicación traducida automáticamente
Artículo escrito por suchetaggarwal4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA