ELEMENTO IFRAME

TABLA DE CONTENIDOS
 01Descripción
 02Ejemplos
 03Atributos
o Atributos específicos
o Atributos globales
 04Eventos
o Eventos globales

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>
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>
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:
o 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 (://).
o Host: el nombre de la computadora. Puede ser una dirección IP o un nombre
de dominio.
o Port: el puerto donde se espera que el recurso se encuentre. Debe estar
precedido por un caráctrer dos puntos (:).
o 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