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.

El elemento iframe es un elemento vacío, lo que significa que no puede llevar contenido entre sus tags de apertura y cierre.

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 documento 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.

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.

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-modals: los diálogos emergentes están permitidos.
  • allow-orientation-lock: los cambios en la orientación de la pantalla están permitidos.
  • 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-popups-to-escape-sandbox: los contextos de navegación auxiliares tienen permitio escapar a la restricción del documento incrustado. Cuando esta característica no está presente, cualquier contexto de navegación auxiliar creado dentro de este contexto hereda las restricciones de sandbox.
  • allow-presentation: la API de Presentación, utilizada para controlar dispositivos como proyectores o televisores conectados, está permitida.
  • 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.
  • allow-top-navigation-by-user-activation: la navegación del contexto de navegación superior (el padre del iframe) está permitida cuando es iniciada por el usuario.

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>

allow

Una lista separada por punto y coma de Directivas de políticas, cada una opcionalmente seguida de un carácter de espacio y una lista separada por espacios de uno o más orígenes. Cada ítem de esta lista especifica un conjunto de orígenes que estarán permitidos para una caracteristica específica.

Una Directiva de políticas puede toma cualquiera de los siguientes valores:

  • accelerometer: controla el acceso a los sensores del acelerómetro.
  • ambient-light-sensor: controla el acceso a los sensores de luz ambiental.
  • autoplay: controla el acceso a la reproducción automática a través de play() y autoplay.
  • camera: controla el acceso a los dispositivos de entrada de video.
  • encrypted-media: controla si requestMediaKeySystemAccess() está permitida.
  • fullscreen: controla si requestFullscreen() está permitida.
  • geolocation: controla el acceso a la interfaz de geolocación.
  • gyroscope: controla el acceso a los sensores del giroscopio.
  • magnetometer: controla el acceso a los sensores del magnetómetro.
  • microphone: controla el acceso a los dispositivos de entrada de audio.
  • midi: controla el acceso al método requestMIDIAccess().
  • payment: controla el acceso a la interfaz PaymentRequest.
  • picture-in-picture: controla el acceso a Picture in Picture.
  • speaker: controla el acceso a los dispositivos de salida de audio.
  • sync-xhr: controla si transferencias XMLHttpRequest sincrónicas están permitidas.
  • usb: controla el acceso a dispositivos USB.
  • vr: controla el acceso a dispositivos de realidad virtual.

Por su parte, los ítems de la lista de orígenes pueden tomar los siguientes valores:

  • *: todos los orígenes tienen permitido el uso de la característica.
  • 'self': solo documentos de mismo origen y dominio tienen permitido el uso de la característica.
  • 'none': ningún origen tiene permitido el uso de la característica.
  • Un origin específico, compuesto por las siguientes partes:
    • Scheme: el protocolo que debería utilizarse para acceder al recurso (http, https, ftp, etc.). Debe estar seguido por un carácter dos puntos y dos caracteres barra (://).
    • Host: el nombre de la computadora. Puede ser una dirección IP o un nombre de dominio.
    • Port: el puerto donde se espera que el recurso se encuentre. Debe estar precedido por un caráctrer dos puntos (:).
    • Domain: un ámbito dentro de una red.

La lista de orígenes por defecto para todas las Directivas de políticas es 'self', a excepción de picture-in-picture y sync-xhr que presentan al valor * como predeterminado.

Este atributo ha sido recientemente introducido al estándar y es de esperar que el soporte provisto por los navegadores sea escaso. Los autores deberían evitar confiar en esta característica como medida de seguridad hasta que el soporte crezca..

Ejemplo

<iframe src="http://notrack.ejemplo.com/shop.html" allow="geolocation 'none'"></iframe>
<iframe src="http://seguro.ejemplo.com/" allow="camera 'none'; microphone 'none'; geolocation http://mapas.ejemplo.com"></iframe>

allowfullscreen

Un valor booleano que indica si se permite al documento provisto por este elemento pasar a pantalla completa, lo que significa que cubrirá 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>

referrerpolicy

Establece la política de origen utilizada en el procesamiento de los atributos del elemento, lo que involucra qué información es enviada acerca del remitente en una petición de otro recurso. Puede contener cualquiera de los siguientes valores:

  • no-referrer: Ninguna información acerca del remitente es enviada en todas las peticiones.
  • no-referrer-when-downgrade: Una URL completa es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • same-origin: Una URL completa es enviada únicamente en las peticiones hechas en el mismo origen.
  • origin: Una URL compuesta por protocolo, servidor y puerto es enviada en todas las peticiones.
  • strict-origin: Una URL compuesta por protocolo, servidor y puerto es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes.
  • strict-origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes, únicamente en peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • unsafe-url: Una URL completa es enviada en todas las peticiones.

Nota: Cuando este atributo toma a la cadena vacía, se asume el valor no-referrer.

Ejemplo

<iframe src="http://www.espiando-al-mundo.com/el-tema-con-la-cia.html" referrerpolicy="no-referrer"></iframe>

loading

Un valor enumerado que indica cuándo debería el navegador cargar el contenido de este iframe. Este atributo puede tomar uno de dos valores:

  • lazy: el navegador debería cargar el contenido de este iframe una vez que ingrese al área visible de la página, pero sin retrasar al evento load.
  • eager: el navegador debería cargar el contenido de este iframe inmediatamente. Este es el valor por defecto.

Ejemplo

<iframe src="https://es.wikipedia.org/wiki/2001:_A_Space_Odyssey_(novela)" loading="lazy"></iframe>

allowpaymentrequest

Un valor booleano que indica si se permite al documento provisto por este elemento realizar peticiones de pago a través de la API de Peticiones de pago. Cuando este atributo tiene el valor "allowpaymentrequest" o la cadena vacía (""), o cuando está simplemente presente, el documento podrá acceder a las peticiones de pago.

Este atributo ha sido introducido al estándar en HTML5, pero fue más tarde removido debido a la falta de implementación por parte de los navegadores. Los autores deberían dejar de utilizarlo.

Ejemplo

<iframe src="http://www.compras-compras.com/art-1354684321.html" allowpaymentrequest></iframe>

allowusermedia

Un valor booleano que indica si se permite al documento provisto por este elemento acceder a la cámara web u otras entradas de audio o video. Cuando este atributo presenta el valor "allowusermedia" o la cadena vacía (""), o cuando está simplemente presente, el documento contenido por este elemento puede acceder a los dispositivos de entrada.

Este atributo se ha vuelto recientemente obsoleto en HTML5 debido a la escasa implementación por parte de autores y navegadores. Su uso ya no es recomendable.

Ejemplo

<iframe src="http://www.una-nueva-era.com/el-hacker.html" allowusermedia></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 se ha vuelto recientemente obsoleto en HTML5 debido a la escasa implementación por parte de autores y navegadores. Su uso ya no es recomendable.

Ejemplo

<iframe src="http://www.mariposas-y-unicornios.com/brillante-en-el-viento.html"></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 por parte 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.