iFrame

El frame o marco es una etiqueta con una historia dilatada en HTML. De ser una etiqueta no estándar ha pasado a ser soportada por todos los navegadores y formar parte de las especificaciones de HTML, para luego retirarse de nuevo del estándar en HTML5. No obstante, ha permanecido en uso y dentro del estándar una etiqueta hermana iFrame que vamos a ver en este artículo, que todavía hoy tiene mucha utilidad.

En concreto iFrame sirve para crear un espacio dentro de la página donde se puede incrustar otra web que se carga en el espacio y operará de manera totalmente independiente, manteniendo sus propios contenidos, estilos y será perfectamente funcional. Por ejemplo si tiene enlaces, se mostrarán en ese mismo espacio y si tiene scripts o aplicaciones dentro se ejecutarán también de manera autónoma en el espacio reservado al iFrame.

1. Principales usos

Un iframe HTML se usa para mostrar una página web dentro de una página web.

<iframe src=URL width=ancho height=alto>Texto alterno</iframe>

2. Atributos

El unicos atributos obligatorios son src=URL width y height.

<iframe src=index.htm width=200 height=200>Texto alterno</iframe>
Atributos iframe
AtributoDescripciónObligatorio
srcEs la URL a mostrar.Si
widthEs el ancho del marco en px o %.Si
heightEs el alto del marco en px o %.Si
sandboxallow-forms|allow-pointer-lock|allow-popups|allow-same-origin|allow-scripts|allow-top-navigationNo
allowEspecifica la politica de uso.No
allowfullscreenPermite que se pueda ver en pantalla completa. True|false.No
allowpaymentrequestPermite que un origen haga solicitud de pago. True|false.No
refererpolicyno-referrer|no-referrer-when-downgrade1origin|origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin unsafe-urlNo
srcdocEspefifica contenido HTML de la pagina a mostrar.No
alignDefine alineamiento. Valores posibles son: left | right | top | middle | bottom.No
allowtransparencyPermite transparencia. True | false.No
scrollingDefine las barras de esplazamiento. Valores posibles son: yes | no | auto.No
marginIgual que en las imagenes.No
marginwidthDetermina margenes ixquierdo y derecho con respecto al borde.No
marginheightDetermina margenes superios e inferios con respecto al borde.No
StyleAtributos CSS asignados aqui mismo.No
idIdentificador para ser usado desde CSS.No
classIdentificador para ser usado desde CSS.No
nameNombre de referencia para ser usado en un target.No

3. Ejemplos

<iframe src="https://www.youtube.com/embed/aFj97Wt-y1Y" width=854 height=480 frameborder=0 allowfullscreen=true>Video Youtube</iframe>