Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

Cada elemento <iframe> tiene su propio historial de sesión y su propio objeto Documento. El contexto de navegación que incluye el contenido implícito se llama contexto 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 objeto Window.

Debido a que cada contexto de navegación es un entorno de documento completo, cada <iframe> en una página requiere más memoria y otros recursos informáticos. Aunque teóricamente puede utilizar tantos <iframe> como desee, compruebe si hay problemas de rendimiento.

Categorías de contenidos Contenido dinámico, contenido textual o estático, contenido incrustado, contenido interactivo, contenido tangible.
Contenido permitido Contenido alternativo que normalmente no se renderiza para los navegadores que no son compatibles con el elemento <iframe>.
Omisión de etiqueta None, both the starting and ending tag are mandatory.
Elementos padres permitidos Cualquier elemento que acepte contenido incrustado.
Roles ARIA permitidos application, document, img
Interfaz DOM  HTMLIFrameElement

Atributos

Este elemento admite atributos globales.

allow
Especifíca una política de características para el <iframe>.
allowfullscreen
Definido como true si el <iframe> puede activar el modo a pantalla completa llamando al método requestFullscreen().

Se considera un atributo heredado y se redefine como allow="fullscreen".

allowpaymentrequest
Definido como true si se debe permitir que un <iframe> de origen cruzado pueda invocar el API de solicitud de pago

Se considera un atributo heredado y se redefine como allow="payment".

csp
Content Security Policy enforced for the embedded resource. See HTMLIFrameElement.csp for details.
height
Indica la altura del frame HTML5en píxeles CSS, o HTML 4.01 en píxeles o como un porcentaje.
importance
The download priority of the resource in the <iframe>'s src attribute. Allowed values:
  • auto: (default) No preference. The browser uses its own heuristics to decide the priority of the resource.
  • high: The resource should be downloaded before other lower-priority page resources.
  • low: The resource should be downloaded after other higher-priority page resources.
name
Nombre objetivo para el contexto de navegación incrustado. Se puede utilizar:
referrerpolicy
Indicates which referrer to send when fetching the frame's resource:
  • no-referrer: The Referer header will not be sent.
  • no-referrer-when-downgrade (default): The Referer header will not be sent to origins without TLS (HTTPS).
  • origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
  • 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 for same 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 origin and the path (but not the fragmentpassword, or username). 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 resource open modal windows.
  • allow-orientation-lock: Lets the resource lock the screen orientation.
  • allow-pointer-lock: Lets the resource use the Pointer Lock API.
  • allow-popups: Allows popups (such as window.open()target="_blank", or showModalDialog()). 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 a presentation session.
  • allow-same-origin: If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy.
  • allow-scripts: Lets the resource run scripts (but not create popup windows).
  • allow-storage-access-by-user-activation  : Lets the resource request access to the parent's storage capabilities with the Storage 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.
Notes about sandboxing:
  • When the embedded document has the same origin as the embedding page, it is strongly discouraged to use both allow-scripts and allow-same-origin, as that lets the embedded document remove the sandbox attribute — making it no more secure than not using the sandbox attribute at all.
  • Sandboxing is useless if the attacker can display content outside a sandboxed iframe — such as if the viewer opens the frame in a new tab. Such content should be also served from a separate origin to limit potential damage.
  • The sandbox 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 HTML5 in CSS pixels, or HTML 4.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.

align Desaprobado HTML4.01, Obsoleto HTML5
La alineación de este elemento con respecto al contexto que lo rodea.
frameborder Obsoleto HTML5 
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.
longdesc Obsoleto HTML5 
Una URI de una descripción larga del marco. Debido al mal uso generalizado, esto no es útil para navegadores no visuales.
marginheight Obsoleto HTML5 
La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes superior e inferior.
marginwidth Obsoleto HTML5 
La cantidad de espacio en píxeles entre el contenido del marco y sus márgenes izquierdo y derecho.
scrolling Obsoleto HTML5 
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

 

mozbrowser

See error 1318532 for exposing this to WebExtensions in Firefox.

Makes the <iframe> act like a top-level browser window. See Browser API for details.
Available only to WebExtensions.
mozallowfullscreen
In Gecko 9.0 or later, this attribute can be set to true if the frame is allowed to be placed into full screen mode by calling its element.mozRequestFullScreen() method. If this isn't set, the element can't be placed into full screen mode.
webkitallowfullscreen
In Chrome 17 or later (and maybe earlier), this attribute can be set to true if the frame is allowed to be placed into full screen mode by calling its element.webkitRequestFullScreen() method. If this isn't set, the element can't be placed into full screen mode.
mozapp
For frames hosting an open web app, this specifies the URL of the app manifest. This ensures that the app is loaded with the right permissions. See Using the Browser API for details. Available in Gecko 13.0 and later.
remote
Load the frame's page in a separate content process.

Secuencia de comandos

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

With the DOM HTMLIFrameElement object, scripts can access the window object of the framed resource via the contentWindow property. The contentDocument property refers to the document inside the <iframe>, same as contentWindow.document.

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

Script access to a frame's content is subject to the same-origin policy. Scripts cannot access most properties in other window 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 using Window.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://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" 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 id="Example2"
    title="iframe Example 2"
    width="400" height="300"
    style="border:none"
    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

Specification Status Comment
Referrer Policy
La definición de 'referrerpolicy attribute' en esta especificación.
Candidate Recommendation Added the referrerpolicy attribute.
HTML Living Standard
La definición de '<iframe>' en esta especificación.
Living Standard  
HTML5
La definición de '<iframe>' en esta especificación.
Recommendation  
HTML 4.01 Specification
La definición de '<iframe>' en esta especificación.
Recommendation  
Screen Orientation API Working Draft Adds allow-orientation-lock to the sandbox attribute.
Presentation API
La definición de 'allow-presentation' en esta especificación.
Candidate Recommendation Adds allow-presentation to the sandbox attribute

Notes

Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)

Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), rendering of inline frames correctly respects the borders of their containing element when they're rounded using border-radius.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
iframeChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo Si
Notas
Soporte completo Si
Notas
Notas The resize CSS property doesn't have any effect on this element due to bug 680823.
IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo Si
Notas
Soporte completo Si
Notas
Notas Safari has a bug that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.
WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo Si
Notas
Soporte completo Si
Notas
Notas The resize CSS property doesn't have any effect on this element due to bug 680823.
Opera Android Soporte completo SiSafari iOS Soporte completo Si
Notas
Soporte completo Si
Notas
Notas Safari has a bug that prevents iframes from loading if the iframe element was hidden when added to the page. iframeElement.src = iframeElement.src should cause it to load the iframe.
Samsung Internet Android Soporte completo Si
align
Deprecated
Chrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
allow
Experimental
Chrome Soporte completo 60Edge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 47Safari Soporte completo 11.1WebView Android Soporte completo 60Chrome Android Soporte completo 60Edge Mobile Sin soporte NoFirefox Android Sin soporte NoOpera Android Soporte completo 44Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No
allowfullscreenChrome Soporte completo 27
Soporte completo 27
Soporte completo 17
Prefijado
Prefijado Requiere de un prefijo de vendedor : webkit
Edge Soporte completo SiFirefox Soporte completo 18
Soporte completo 18
Soporte completo 9
Prefijado
Prefijado Requiere de un prefijo de vendedor : moz
IE Soporte completo 11
Prefijado
Soporte completo 11
Prefijado
Prefijado Requiere de un prefijo de vendedor : ms
Opera Soporte completo SiSafari Soporte completo 7
Soporte completo 7
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : webkit
WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 18
Soporte completo 18
Soporte completo 9
Prefijado
Prefijado Requiere de un prefijo de vendedor : moz
Opera Android Sin soporte NoSafari iOS Soporte completo 7
Soporte completo 7
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : webkit
Samsung Internet Android ?
allowpaymentrequest
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
frameborder
Deprecated
Chrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
heightChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
longdesc
Deprecated
Chrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
marginheight
Deprecated
Chrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
marginwidthChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
nameChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
referrerpolicyChrome Soporte completo 51Edge Sin soporte NoFirefox Soporte completo 50IE Sin soporte NoOpera Soporte completo 38Safari Soporte completo 11.1WebView Android Soporte completo 51Chrome Android Soporte completo 51Edge Mobile Sin soporte NoFirefox Android Soporte completo 50Opera Android Soporte completo 41Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 7.2
scrolling
Deprecated
Chrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
sandboxChrome Soporte completo 4Edge Soporte completo SiFirefox Soporte completo 17IE Soporte completo 10Opera Soporte completo 15Safari Soporte completo 5WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 17Opera Android ? Safari iOS Soporte completo 4.2Samsung Internet Android Soporte completo Si
sandbox="allow-popups"Chrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 28IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Soporte completo 27Opera Android ? Safari iOS ? Samsung Internet Android ?
sandbox="allow-popups-to-escape-sandbox"Chrome Soporte completo 46Edge Sin soporte NoFirefox Soporte completo 49IE Sin soporte NoOpera Soporte completo 32Safari ? WebView Android Soporte completo 46Chrome Android Soporte completo 46Edge Mobile Sin soporte NoFirefox Android Soporte completo 49Opera Android Soporte completo 32Safari iOS ? Samsung Internet Android Soporte completo 5.0
sandbox="allow-modals"Chrome ? Edge Sin soporte NoFirefox Soporte completo 49IE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Soporte completo 49Opera Android ? Safari iOS ? Samsung Internet Android ?
sandbox="allow-presentation"Chrome Soporte completo 53Edge Sin soporte NoFirefox Soporte completo 50IE Sin soporte NoOpera Soporte completo 40Safari ? WebView Android Sin soporte NoChrome Android Soporte completo 53Edge Mobile Sin soporte NoFirefox Android Soporte completo 50Opera Android Soporte completo 41Safari iOS ? Samsung Internet Android Soporte completo 6.0
sandbox="allow-storage-access-by-user-activation"
ExperimentalNo estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 65
Deshabilitado
Soporte completo 65
Deshabilitado
Deshabilitado From version 65: this feature is behind the dom.storage_access.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 11.1
Notas
Soporte completo 11.1
Notas
Notas Currently only available on macOS High Sierra 10.13.4 beta, and in Safari Technology Preview 47+.
WebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Soporte completo 65
Deshabilitado
Soporte completo 65
Deshabilitado
Deshabilitado From version 65: this feature is behind the dom.storage_access.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Sin soporte NoSafari iOS Soporte completo 11.1
Notas
Soporte completo 11.1
Notas
Notas Currently only available on iOS 11.3 beta.
Samsung Internet Android ?
sandbox="allow-top-navigation-by-user-activation"Chrome Soporte completo 58Edge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 45Safari Soporte completo 11.1
Notas
Soporte completo 11.1
Notas
Notas Not initially available in 11.1, but added in sub-version 13605.1.33.1.2.
WebView Android Soporte completo 58Chrome Android Soporte completo 58Edge Mobile Sin soporte NoFirefox Android Sin soporte NoOpera Android Soporte completo 43Safari iOS ? Samsung Internet Android Soporte completo 7.0
srcChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
srcdocChrome Soporte completo 20Edge Sin soporte NoFirefox Soporte completo 25IE Sin soporte NoOpera Soporte completo 15Safari Soporte completo 6WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Soporte completo 25Opera Android ? Safari iOS ? Samsung Internet Android ?
widthChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo SiIE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
mozbrowser
No estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1318532
Notas Available only to WebExtensions.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1318532
Notas Available only to WebExtensions.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
No estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Etiquetas y colaboradores del documento

Última actualización por: danielblazquez,