Aunque su uso no es muy común, la etiqueta <iframe> puede ser muy útil en determinadas ocasiones, ya que permite insertar un documento HTML dentro de otro documento HTML. Un iframe puede considerarse como un agujero que se abre en una página web y a través del cual se muestra otra página web.
En ocasiones se utiliza para mostrar contenidos externos al sitio web como si fueran parte del mismo sitio. Otra veces se emplea para incluir una aplicación común a varios sitios web de una misma empresa.
En el ejemplo que vamos a ver para embeber un iframe de la home de este sitio web. Para ello, utilizaremos un <iframe> para incluir en un pequeño recuadro donde se podrá visualizar mi sitio web.
| Etiqueta | <iframe> |
|---|---|
| Atributos comunes | básicos |
| Atributos propios | src = "url" – URL del documento HTML que se visualiza en el iframeheight = "longitud" – Altura que ocupará el iframe en el documentowidth = "longitud" – Anchura que ocupará el iframe en el documentoname = "texto" – Nombre que identifica al iframelongdesc = "url" – Dirección en la que puede encontrarse una descripción larga del contenido del iframescrolling = "yes | no | auto" – Indica si el iframe debe mostrar barras de scroll (horizontal y vertical) cuando el contenido incluido no cabe en el iframe |
| Tipo de elemento | Bloque y en línea |
| Descripción | Se emplea para incluir en la página un marco que muestra otro documento HTML |
El siguiente ejemplo define la altura y anchura del iframe, indica la URL que se debe mostrar y mediante el atributo scrolling se indica que el iframe no debe mostrar barras de scroll ni siquiera en el caso de que el contenido mostrado no quepa en el iframe definido:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Otras etiquetas HTML</h1>
<h2>iframe</h2>
<iframe src="https://tupacbruch.com/" frameborde="2" width="100%" height="350px" >
</iframe>
</div>
</body>
</html>