Etiqueta Iframe

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:

<iframe height=»» width=»» name=»» sandbox=»» seamless=»» src==»» srdoc=»»></iframe>

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?

Cursos en Let’s Webbing:
¡GRATIS y GRATIS!

LIBRE

  • Libre acceso al curso a través de LetsWebbing.com
  • Acceso a los módulos extras.
  • Descarga del curso en PDF.
  • Descarga los archivos de código de todas las prácticas.

¡Empieza cuando quieras!

SUSCRIPTOR

  • Libre acceso al curso a través de LetsWebbing.com
  • Acceso a los módulos extras.
  • Descarga del curso en PDF.
  • Descarga los archivos de código de todas las prácticas.
Etiqueta Iframe
5 (100%) 1 voto[s]

Summary
Etiqueta Iframe
Article Name
Etiqueta Iframe
Description
En este módulo final aprenderás todo sobre la etiqueta iframe de HTML5
Author
Publisher Name
Let's Webbing
Publisher Logo

¡Aprende GRATIS!

Suscríbete a la newsletter semanal y aprende con los tutoriales, trucos, miniguías y miles de utilidades sobre diseño, desarrollo y programación de páginas web.

¡EMAIL GUARDADO!

Vaya! Algo ha fallado. Por favor, inténtalo de nuevo