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.
Un iframe HTML se usa para mostrar una página web o porcion de ella dentro de otra página web.
<iframe src=index.htm width=200 height=200>Texto alterno</iframe>
El unicos atributos obligatorios son src=URL width y height.
| Atributo | Descripción | Obligatorio |
|---|---|---|
| src | Es la URL a mostrar. | Si |
| width | Es el ancho del marco en px o %. | Si |
| height | Es el alto del marco en px o %. | Si |
| sandbox | allow-forms|allow-pointer-lock|allow-popups|allow-same-origin|allow-scripts|allow-top-navigation | No |
| allow | Especifica la politica de uso. | No |
| allowfullscreen | Permite que se pueda ver en pantalla completa. True|false. | No |
| allowpaymentrequest | Permite que un origen haga solicitud de pago. True|false. | No |
| refererpolicy | no-referrer|no-referrer-when-downgrade1origin|origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin unsafe-url | No |
| srcdoc | Espefifica contenido HTML de la pagina a mostrar. | No |
| align | Define alineamiento. Valores posibles son: left | right | top | middle | bottom. | No |
| allowtransparency | Permite transparencia. True | false. | No |
| scrolling | Define las barras de esplazamiento. Valores posibles son: yes | no | auto. | No |
| margin | Igual que en las imagenes. | No |
| marginwidth | Determina margenes ixquierdo y derecho con respecto al borde. | No |
| marginheight | Determina margenes superios e inferios con respecto al borde. | No |
| Style | Atributos CSS asignados aqui mismo. | No |
| id | Identificador para ser usado desde CSS. | No |
| class | Identificador para ser usado desde CSS. | No |
| name | Nombre de referencia para ser usado en un target. | No |
Mostrar un trozo de mapa de OpenStreetMap.
<iframe width=300 height=200 src="https://www.openstreetmap.org/export/embed.html?bbox=-77.03757584095001%2C-12.063193357473182%2C-77.03395485877992%2C-12.06139923338779&layer=mapnik"> </iframe>
Mostrar un video de Youtube.
<iframe width=560 height=315 src="https://www.youtube.com/embed/1qk-0WKCqUU?si=YrOA7AWVzW13R9Yw" title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> </iframe>