Elemento iframe

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento iframe representa un contexto de navegación anidado, lo que es básicamente un documento anidado en el documento actual. La dirección desde la cual el navegador debería recuperar el documento incrustado puede ser provista en el atributo src y últimamente, desde la llegada de HTML5, este documento también puede incluirse completamente como contenido del atributo srcdoc.

El atributo sandbox, nuevo en HTML5, cerca el contenido del documento incrustado deshabilitando características potencialmente perjudiciales o molestas como formularios o programas. Esto permite a los autores incrustar contenido de terceros en el documento de manera segura.

Ejemplos

Este ejemplo muestra un uso básico y tradicional del elemento iframe. Aquí incrustaremos un documento, preparado específicamente para este ejemplo, al proveer su URI en el atributo src. Verás como el navegador aplica una altura por defecto y provee convenientemente las barras de desplazamiento para acceder al contenido fuera del área de visualización. Asimismo, usaremos CSS para hacer que el elemento abarque todo el espacio horizontal disponible, con el fin de mejorar la presentación. Si no se aplicara ningún estilo, el elemento tendría un ancho fijo y predeterminado.

En este ejemplo emularemos una práctica muy común y útil, en la que los autores incluyen versiones en vivo de documentos externos con fines de referencia. Esta implementación podría ser fácilmente adaptada para hacer un uso bastante frecuente del elemento, que consiste en trozos de contenido que se cargan dinámicamente en el iframe en respuesta a interacciones del usuario. Esta técnica requiere de programas del lado cliente.

<h1>Cascar nueces como un maestro</h1>
<p>No ha existido nunca un cascanueces que no haya hecho su trabajo según las reglas, de modo que el primer paso que debes dar es leer la "Especificación del cascanueces". Para tu comodidad, hemos agregado una versión en vivo de la especificación en este documento. Disfrútala!</p>
<iframe src="iframe-example-1.html" style="width: 100%"></iframe>

Cascar nueces como un maestro

No ha existido nunca un cascanueces que no haya hecho su trabajo según las reglas, de modo que el primer paso que debes dar es leer la "Especificación del cascanueces". Para tu comodidad, hemos agregado una versión en vivo de la especificación en este documento. Disfrútala!

El segundo ejemplo muestra la sección de comentarios de una publicación, en la que los usuarios discuten sobre el tema tratado en el artículo. El autor de este documento ha agregado convenientemente los comentarios como contenido del atributo srcdoc de un iframe, con el fin de proveer una capa más de seguridad, gracias al atributo sandbox. La mera presencia de este atributo evitará la ejecución de características potencialmente peligrosas o molestas, protegiendo al documento de inyecciones de programas hechas por participantes no deseados.

Nota que todas las comillas dobles (") y símbolos & deben ser escapados (con &quot; y &amp; respectivamente) dentro del atributo srcdoc para evitar que los navegadores interpreten equivocadamente su contenido.

<h2>Comentarios</h2>
<p>Demain dijo:</p>
<iframe style="border: 0; margin: 0" srcdoc="<p>El hecho es que nunca puedes estar &quot;seguro&quot; de esto...</p>" sandbox></iframe>
<p>Jhonny dijo:</p>
<iframe style="border: 0; margin: 0" srcdoc="<p>Si continúas con esa actitud inyectaré un virus en tu artículo!</p><p>Te lo advierto, soy un hacker profesional!</p>" sandbox></iframe>

Comentarios

Demain dijo:

Jhonny dijo:

Nota: el ejemplo anterior contiene algunas declaraciones CSS con el fin de mejorar la presentación.

Atributos

Atributos específicos

src

El URI del recurso incrustado.

Si el atributo srcdoc está presente, tiene precedencia sobre src. En caso de que el navegador no soporte el atributo recientemente introducido srcdoc, src actúa como respaldo.

Este atributo es obligatorio si el atributo itemprop está presente, ya que se utiliza para determinar el valor de la propiedad.

Ejemplo

<iframe src="http://www.othersite.com/articles/about-the-truth.html"></iframe>

srcdoc

Un documento que será representado dentro de este elemento.

The srcdoc attribute, if present, takes precedence over src. In case the browser doesn't support the recently introduced srcdoc attribute, src acts as a fallback.

This attribute is mandatory if the itemprop attribute is present in the iframe element, as it's used to determine the value of the property.

Hasta el 01-05-2015, el soporte provisto por los navegadores para este atributo es incompleto. Los autores pueden tener que usar el atributo src como respaldo hasta que el soporte crezca.

Ejemplo

<iframe style="border: 0; margin: 0" srcdoc="<h1>Un puñado de oportunidades</h1><p>Sé que estás en busca de algunas aventuras nuevas otra vez...</p>"></iframe>

name

Un nombre para el contexto de navegación anidado que el elemento define. El nombre provisto en este atributo puede usarse en otros elementos (como a, area o form) para especificar el contexto de navegación donde las acciones del elemento serán ejecutadas.

Este atributo ha sido desaprovado en versiones previas de HTML en favor del atributo id. HTML5 lo ha restituido con el fin de que provea un nombre para los contextos de navegación anidados, un enfoque diferente al que adopta id.

Ejemplo

<iframe src="http://www.otrositio.com/acerca.html" name="contexto1"></iframe>

sandbox

Un conjunto de valores que indican qué restricciones deberían ser aplicadas al documento dentro de este iframe. Cuando este atributo está presente, instruye al navegador a deshabilitar ciertas características potencialmente peligrosas o molestas como los programas y los formularios.

Como contenido, acepta una lista de cadenas separadas por espacios, cada una de las cuales indica una característica en particular que estará permitida. A continuación, se describen todos los valores posibles en esta lista:

  • allow-forms: el envío de formularios está permitido.
  • allow-pointer-lock: la API de Pointer Lock está permitida.
  • allow-popups: nuevas ventanas pueden abrirse desde dentro del documento de iframe (por ejemplo, usando el atributo target o programas del lado cliente).
  • allow-same-origin: se permite a los programas afectar los contenidos del documento dentro de este iframe.
  • allow-scripts: se permite la ejecución de programas.
  • allow-top-navigation: la navegación del contexto de navegación superior (el padre del iframe) está permitida.

Si el atributo sandbox está presente, todas las características listadas se deshabilitan por defecto. Para evitar que una característica sea bloqueada, ésta debe estar presente en la lista de este atributo.

Este atributo ha sido recientemente introducido a HTML5. A pesar de esto, el soporte provisto por los navegadores es bastante completo y los autores pueden utilizarlo, al menos, para proteger sus documento en los navegadores que lo soporten.

Ejemplo

<iframe src="http://www.acantoate.com/senza-parole.html" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
<iframe src="http://www.otrositio.com/articulos/el-genio-en-mi.html" sandbox></iframe>

seamless

Un valor booleano que indica si los estilos del documento padre deberían aplicarse al documento dentro de este iframe. Si el atributo tiene el valor "seamless" o la cadena vacía (""), o si simplemente está presente, los estilos del documento principal serán compartidos con el documento en este iframe.

Este atributo ha sido introducido al estándar en HTML5, y el soporte provisto por los navegadores es casi inexistente (hasta el 07-10-2014). Se aconseja a los autores evitar su uso hasta que el soporte crezca.

Ejemplo

<iframe src="http://www.mariposas-y-unicornios.com/brillante-en-el-viento.html"></iframe>

allowfullscreen

Un valor booleano que indica si se permite a los objetos en el documento provisto por este elemento pasar a pantalla completa, lo que significa que cubrirán todo el área de la pantalla. Cuando este atributo tiene el valor "allowfullscreen" o la cadena vacía (""), o cuando está simplemente presente, el modo de pantalla completa está permitido para el documento provisto por este elemento.

Este atributo ha sido introducido al estándar en HTML5, y el soporte provisto por los navegadores es parcial (hasta el 07-10-2014). Los autores deberían evitar confiar en esta característica para proveer contenido importante.

Ejemplo

<iframe src="http://www.el-mundo-de-los-articulos.com/una-vision-amplia.html" allowfullscreen></iframe>

width

Un número de píxeles que indica el ancho del elemento. Si este atributo es omitido se utilizará un valor predeterminado.

Ejemplo

<iframe src="http://www.incomprendido-porque.com/fuera-de-mi-mente.html" width="600"></iframe>

height

Un número de píxeles que indica la altura del elemento. Si este atributo es omitido se utilizará un valor predeterminado.

Ejemplo

<iframe src="http://www.incomprendido-porque.com/volviendome-loco.html" height="250"></iframe>

longdesc

El URI de un recurso con una explicación detallada del contenido/propísto del elemento.

Este atributo se ha vuelto obsoleto en HTML5 debido a la escasa implementación de autores y navegadores. Su funcionalidad puede ser reemplazada con atributos aria.

Ejemplo

<iframe src="http://www.url001.com/tresure-map.html" longdesc="tresure-map-explanation.html"></iframe>

align

La alineación horizontal del elemento respecto a sus alrededores. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):

  • left: el elemento se alinea a la margen izquierda.
  • center: el elemento es centrado.
  • right: el elemento se alinea a la margen derecha.
  • justify: el elemento es justificado o alineado a ambas márgenes.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<iframe src="http://www.un-sitio-web-nuevo.com" align="center"></iframe>

frameborder

Un valor booleano que indica si se debería dibujar un borde alrededor del elemento. Si este atributo tiene el valor "1", un borde será dibujado. Si tiene el valor "0" no presentará borde.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Se conseja a los autores a usar declaraciones de hojas de estilo en su lugar.

Ejemplo

<iframe src="http://www.otro-sitio-web-nuevo.com" frameborder="0"></iframe>

marginheight

Un número de píxeles a usar como márgenes superior e inferior del elemento.

Este atributo ha sido removido en HTML5 y su uso ya no es válido. Se aconseja a los autores usar declaraciones de hojas de estilo en su lugar.

Ejemplo

<iframe src="../estrella-brillante.html" marginheight="20"></iframe>

marginwidth

Un número de píxeles a usar como márgenes izquierda y derecha del elemento.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Se aconseja a los autores usar declaraciones de hojas de estilo en su lugar.

Ejemplo

<iframe src="../estrella-brillante.html" marginwidth="50"></iframe>

scrolling

Una cadena que indica cómo se deberían proveer las barras de desplazamiento en este elemento. Los tres valores insensibles a mayúsculas/minúsculas que puede tomar son:

  • auto: los dispositivos de desplazamiento se proveen solo cuando es necesario.
  • yes: los dispositivos de desplazamiento se proveen siempre.
  • no: los dispositivos de desplazamiento no se proveen nunca.

Ejemplo

Este atributo ha sido removido en HTML5 y su uso ya no es válido. Se aconseja a los autores usar declaraciones de hojas de estilo en su lugar.

<iframe src="../estrella-brillante.html" scrolling="no"></iframe>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.