Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.

En este módulo final te mostraré las posibilidades de la etiqueta iframe.

Etiqueta <iframe> … </iframe>

Esta etiqueta permite realizar la inserción de un marco en línea dentro del documento web. Este marco nos permite insertar contenido externo dentro de nuestro documento, como un vídeo de youtube, un mapa online (de Google maps por ejemplo) o incluso otra página web al completo dentro de la nuestra.

Su sintaxis es la siguiente:

Revisemos sus atributos:

• width
  Permite indicar el ancho del marco en píxeles.
• height
  Permite indicar el alto del marco en píxeles.
• name
  Permite indicar el nombre que se quiere asignar a este elemento.
• src
  Permite indicar el origen del objeto que se quiere insertar en el marco (su ubicación); puede ser URL absoluta o relativa.
• srdoc
  Permite indicar el contenido del objeto en línea. Es decir, si el navegador es compatible con el objeto que se indica, directamente se muestra el contenido en el documento html5.
• seamless
  Premite indicar que el marco se presente sin barras de desplazamiento ni bordes. De esta forma la integración visual con nuestro documento es completa. El atributo es booleano, por lo que no hay que añadirle ningún valor. Si añades este atributo en la etiqueta lo estás activando.
• sandbox
  Premite indicar ciertas restricciones para el contenido del marco. Si se especifica el atributo con un valor vacío =»» se aplican todas las restricciones. Las restricciones son las siguientes:
  • (en blanco)
    Se aplican todas las restricciones
  • allow-same-origin
    El contenido del marco se trata de la misma forma que el documento web que lo contiene.
  • allow-top-navigation
    Permite que el contenido del marco pueda interactuar con el contenido del documento web que lo contiene en la «navegación» por el mismo.
  • allow-forms
    Permite que el contenido del marco pueda realizar el envío de datos de formulario.
  • allow-scripts
    Permite que el contenido del marco pueda ejecutar scripts.

Veamos un ejemplo de un documento HTML5 con un mapa de Google Maps insertado usando esta etiqueta:

Así se verá en el navegador:

¡A practicar!

La etiqueta que hemos visto en este módulo no tiene mayor complicación y lo más habitual es que sean las propias webs las que ya te den el código completo, con todos sus atributos y configuración. Es más, muchas de ellas, por ejemplo las relacionadas con programa de afiliados y similares, te indican que no puedes modificar el código que te dan, por lo que no podrás personalizar sus códigos.

En cualquier caso, es recomendable que conozcas sus códigos y veas unos cuantos ejemplos, por lo que te recomiendo que visites páginas como Google Maps ó Youtube y crees tus propios documentos en HTML5 añadiendo mapas o vídeos con la etiqueta <iframe>.

Recuerda que para acceder a los módulos y contenido extra has de ser suscriptor. ¿Aún no lo eres?

Summary

Article Name

Etiqueta Iframe

Description

En este módulo final aprenderás todo sobre la etiqueta iframe de HTML5

Author

Nicolau Roca

Publisher Name

Let's Webbing

Publisher Logo