Elemento `<iframe>`

El elemento <iframe> permite integrar una página web dentro de otra.

Atributos más importantes de <iframe>:

Atributo	Descripción
`height`	Altura, por defecto en píxeles. Si no cabe todo el contenido, se usa una barra de desplazamiento. También se puede fijar con CSS.
`width`	Anchura, como el anterior.
`src`	La ruta al contenido inicial del `<iframe>`.
`name`	Nombre, para referirse al `<iframe>` desde un vínculo.

El contenido del <iframe> cambia al seguir los vínculos. Para conseguirlo, en los vínculos hay que poner como valor del atributo target el valor del atributo name del <iframe> en que queramos que se cargue.

Es decir, para que se carguen en un <iframe> con name="contenido" se usará:

<a href="..." target="contenido">...</a>

El código del ejemplo anterior sería el siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>iframe</title>
  </head>
  <body>
    <ul>
      <li><a href="listas.html" target="contenido">Ejemplo de listas</a></li>
      <li><a href="tablas.html" target="contenido">Ejemplo de tablas</a></li>
    </ul>
    
    <h1>&lt;iframe&gt;</h1>
    <iframe height="300" width="400" name="contenido" src="listas.html">
  </body>
</html>

Inicialmente, el <iframe> carga listas.html. Luego, según se pulse el primer enlace o el segundo, carga los documentos listas.html o tablas.html, respectivamente. Los tres documentos deben estar en el mismo directorio.

Probar en el navegador

Documento HTML

Usos muy habituales de los iframes en la actualidad son:

Incrustación de vídeos de plataformas de streaming (como YouTube).
Incrustación de mapas interactivos.

Por ejemplo:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-8.553435802459719%2C42.87632184035309%2C-8.542964458465578%2C42.879675041598546&amp;layer=mapnik" style="border: 1px solid black;"></iframe>

Probar en el navegador

Documento HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/brSdUNadZmM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Probar en el navegador

Documento HTML