Elelemento HTML<iframe> (de inline frame) representa uncontexto de navegación anidado, el cual permite incrustrar otra página HTML en la página actual.

Pruébalo

<iframe   title="Inline Frame Example"  width="300"  height="200"  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik"></iframe>

iframe {  border: 1px solid black;  width: 100%; /* takes precedence over the width set with the HTML width attribute */}

Cada elemento<iframe> tiene su propiohistorial de sesión y su propio objetoDocumento. El contexto de navegación que incluye el contenido implícito se llamacontexto de navegación principal. El contexto de navegación de nivel superior (que no tiene padre) es típicamente la ventana del navegador, representado por el objetoWindow.

Atributos

Este elemento admiteatributos globales.

• En el atributotarget de los elementos<a>,<form> y<base>.
• En el atributoformtarget de los elementos<input> y<button>
• En el parámetrowindowName en el métodowindow.open().

allow

Especifíca unapolítica de características para el<iframe>. Vea el articuloPrivacy, permissions, and information security para detalles en temas de seguridad y como<iframe> funciona con las Politicas de Herramientas para mantener los sistemas seguros.

allowfullscreen

Definido comotrue si el<iframe> puede activar el modo a pantalla completa llamando al métodorequestFullscreen().

Nota:Se considera un atributo heredado y se redefine comoallow="fullscreen".

allowpaymentrequest

Definido comotrue si se debe permitir que un<iframe> de origen cruzado pueda invocar elAPI de solicitud de pago. <

Nota:Se considera un atributo heredado y se redefine comoallow="payment".

cspExperimental

UnaPolitica de Seguridad del Contenido aplicada para el recurso incrustado. VeaHTMLIFrameElement.csp para detalles.

height

Indica la altura del frame en HTML5 en píxeles CSS, o en HTML4.01 en píxeles o como un porcentaje.

importanceExperimental

La prioridad de descarga en el recurso para el atributosrc del<iframe>. Valores permitidos:

• auto: (default) Sin preferencia. El buscador utiliza sus propias heurísticas para decidir la prioridad del recurso.
• high: El recurso debe ser descargado antes que otros recursos de baja-prioridad de los recursos de la página.
• low: El recurso debe ser descargado después de otros recursos de alta-prioridad de los recursos de la página.

name

Nombre objetivo para el contexto de navegación incrustado. Se puede utilizar:

• En el atributo target de los elementos<a>,<form> y<base>.
• En el atributo formtarget de los elementos<input> y<button>
• En el parámetro windowName en el métodowindow.open().

referrerpolicy

Indicates whichreferrer to send when fetching the frame's resource:

• no-referrer: TheReferer header will not be sent.
• no-referrer-when-downgrade (default): TheReferer header will not be sent toorigins withoutTLS (HTTPS).
• origin: The sent referrer will be limited to the origin of the referring page: itsscheme,host, andport.
• origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
• same-origin: A referrer will be sent forsame origin, but cross-origin requests will contain no referrer information.
• strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).
• strict-origin-when-cross-origin: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
• unsafe-url: The referrer will include the originand the path (but not thefragment,password, orusername).This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

sandbox

Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:

• allow-forms: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.
• allow-modals: Lets the resourceopen modal windows.
• allow-orientation-lock: Lets the resourcelock the screen orientation.
• allow-pointer-lock: Lets the resource use thePointer Lock API.
• allow-popups: Allows popups (such aswindow.open(),target="_blank", orshowModalDialog()). If this keyword is not used, the popup will silently fail to open.
• allow-popups-to-escape-sandbox: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.
• allow-presentation: Lets the resource start apresentation session.
• allow-same-origin: If this token is not used, the resource is treated as being from a special origin that always fails thesame-origin policy.
• allow-scripts: Lets the resource run scripts (but not create popup windows).
• allow-storage-access-by-user-activationExperimental: Lets the resource request access to the parent's storage capabilities with theStorage Access API.
• allow-top-navigation: Lets the resource navigate the top-level browsing context (the one named_top).
• allow-top-navigation-by-user-activation: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.

Nota:

• When the embedded document has the same origin as the embedding page, it isstrongly discouraged to use bothallow-scripts andallow-same-origin, as that lets the embedded document remove thesandbox attribute — making it no more secure than not using thesandbox attribute at all.
• Sandboxing is useless if the attacker can display content outside a sandboxediframe — such as if the viewer opens the frame in a new tab. Such content should be also served from aseparate origin to limit potential damage.
• Thesandbox attribute is unsupported in Internet Explorer 9 and earlier.

seamless

This Boolean attribute indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the<iframe> to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this).

src

The URL of the page to embed.

srcdoc

The content of the page that the embedded context is to contain.

width

Indicates the width of the frame in HTML5 in CSS pixels, or in HTML4.01 in pixels or as a percentage.

Atributos obsoletos

Estos atributos están obsoletos y es posible que ya no sean compatibles con todos los agentes de usuario. No debe utilizarlos en contenido nuevo y tratar de eliminarlos del contenido existente.

alignObsoleto

La alineación de este elemento con respecto al contexto que lo rodea.

frameborderObsoleto

El valor 1 (por defecto) indica al navegador establecer una frontera entre este marco y todo otro marco. El valor 0 indica que el navegador no establece una frontera entre este marco y otros marcos.

longdescObsoleto

Una URI de una descripción larga del marco. Debido al mal uso generalizado, esto no es útil para navegadores no visuales.

marginheightObsoleto

La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes superior e inferior.

marginwidthObsoleto

La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes izquierdo y derecho.

scrollingObsoleto

Indica cuándo el navegador debe proporcionar una barra de desplazamiento para el marco:

• auto: Sólo cuando el contenido del marco es mayor que sus dimensiones.
• yes: Muestra siempre una barra de desplazamiento.
• no: No muestr la barra de desplazamiento nunca.

Atributos no estándar

mozbrowserNo estándar

Nota:SeeError 1318532 en Firefox for exposing this to WebExtensions in Firefox.

Makes the<iframe> act like a top-level browser window. SeeBrowser API for details.Available only toWebExtensions.

mozallowfullscreenNo estándar

In Gecko 9.0 or later, this attribute can be set totrue if the frame is allowed to be placed into full screen mode by calling itselement.mozRequestFullScreen() method. If this isn't set, the element can't be placed into full screen mode.

webkitallowfullscreenNo estándar

In Chrome 17 or later (and maybe earlier), this attribute can be set totrue if the frame is allowed to be placed into full screen mode by calling itselement.webkitRequestFullScreen() method. If this isn't set, the element can't be placed into full screen mode.

mozappNo estándar

For frames hosting anopen web app, this specifies the URL of theapp manifest. This ensures that the app is loaded with the right permissions. SeeUsing the Browser API for details. Available in Gecko 13.0 and later.

remoteNo estándar

Load the frame's page in a separate content process.

Secuencia de comandos

Inline frames, like<frame> elements, are included in thewindow.frames pseudo-array.

With the DOMHTMLIFrameElement object, scripts can access thewindow object of the framed resource via thecontentWindow property. ThecontentDocument property refers to thedocument inside the<iframe>, same ascontentWindow.document.

From the inside of a frame, a script can get a reference to its parent window withwindow.parent.

Script access to a frame's content is subject to thesame-origin policy. Scripts cannot access most properties in otherwindow objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved usingWindow.postMessage().

Ejemplos

Un <iframe> simple

Un<iframe> en acción. Después de crear el marco, cuando el usuario hace clic en un botón, su título se muestra en una alerta.

HTML

<iframe  src="https://example.org"  title="iframe Example 1"  width="400"  height="300">  <p>Your browser does not support iframes.</p></iframe>

Resultado

Abrir un enlace en un <iframe> en otra pestaña

En este ejemplo, se muestra un mapa de Google en un marco.

HTML

<iframe   title="iframe Example 2"  width="400"  height="300"   src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"></iframe>

Resultado

Especificaciones

Compatibilidad con navegadores