Tutorial: Usar Iframe para Abrir una Página dentro de Otra

IFrame es una evolución de los marcos rígidos que se usan para dividir páginas <frameset> y <frame>, la diferencia es que con IFrame puedes agregar un marco dentro del contenido de tu página e inclusive sobre el, también veremos como hacerlo aparecer y desaparecer con un Botón.

Iniciemos, el siguiente ejemplo es una muestra básica del uso de esta etiqueta.

Ejemplo:


Código:

<iframe frameborder="1" height="150" src="http://paginaenlazada.html" width="100%">Tu Navegador no soporta esta característica
</iframe>

Importante: frameborder es la propiedad que determina el ancho del borde al rededor de la página, puedes modificar el Heigth y el Width para cambiar el alto y el ancho del marco respectivamente. Ademas lo que pongas entre <iframe> y </iframe> aparecerá en los navegadores que no tienen disponible o no esta activada IFrame, otras propiedades incluyen Scrolling, propiedad que determina el comportamiento de las barras de desplazamiento, la cual puede tener el valor de Auto, Yes y No.

Ahora, el siguiente ejemplo indica como usarlo sobre tu página, para esto recibiremos un poco de ayuda de la etiqueta Div y nos puede servir para hacer algo diferente de las 'alertas' o 'pop-ups' comunes.

Ejemplo:

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.


Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

Código:

<div name='pop1' id='pop1' style="height: 200; left: 150; position: absolute; top: 50; width: 300;">
<iframe frameborder="NO" height="200" marginheight="0" marginwidth="0" scrolling="YES" src="http://trucosw3.blogspot.com/p/directorio.html" style="border-color: black; border-style: solid; border-width: 5;" width="300"></iframe>
</div>

Como puedes ver la etiqueta Div envuelve a la IFrame, con las propiedades de Posición absoluta y con Top y Left que ubican el div según lo alto y la izquierda respectivamente, lo que le permite estar sobre el texto, y al IFrame le puedes agregar algo de Estilo.

Ahora, si deseas que este aparezca y desaparezca haciendo click en un botón:

Pruébalo:




Código:

<br />
 <input type=button value="Mostrar" onClick="document.all.pop1.style.visibility='visible'"> <br/>
<input type=button value="Ocultar" onClick="document.all.pop1.style.visibility='hidden'">
<br />

Obviamente funciona solo con el nombre o id correcto así: "<div name='pop1' id='pop1'..." con "...document.all.pop1....", creo que el estilo del Div se esta alterado debido a la plantilla del Blogger pero prueben en su página y verán que se ve mucho mas agradable.