MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<iframe>

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Il HTML Inline Frame Element <iframe> rappresenta una pagina HTML contenuta dentro un'altra pagina. Un <iframe> puó essere utilizzato all'interno di un normale documento HTML. Ciascun <iframe> ha una sua cronologia. La pagina HTML che contiene l'iframe si chiama parent (parente).

Content categories Flow content, phrasing content, embedded content, interactive content, palpable content.
Permitted content Special, see prose
Tag omission Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.
Permitted parents Any element that accepts embedded content.
Permitted ARIA roles application, document, img
DOM interface HTMLIFrameElement

Attributi

L'elemento <iframe> possiede i seguenti attributi.

align Deprecato HTML4.01, Obsolete since HTML5
L'allineamento dell'iframe rispetto al contesto circostante.
 
allowfullscreen
Se questo attributo è settato a true l'iframe puó essere collocato a schermo intero chiamando il metodo Element.requestFullscreen(). Se non é settato l'iframe non puó collocari a schermo intero.
frameborder HTML 4 only
Il valore 1 (default) dice al browser di disegnare un bordo tra l'iframe ed ogni altro iframe. Il valore - dice al browser di non disegnare un bordo tra l'iframe ed ogni altro iframe.
height
Indica l'altezza dell'iframe HTML5 in CSS pixels.
longdesc HTML 4 only
Non é supportato in HTML5. É un URI di una descrizione del frame.
marginheight HTML 4 only
Non é supportato in HTML5. É il margine superiore ed inferiore in pixel.
marginwidth HTML 4 only
Non é supportato in HTML5. É il margine destro e sinistro in pixel.
mozallowfullscreen
Usa allowfullscreen invece. Per Gecko 9.0 o superiori. Se questo attributo è settato a true l'iframe puó essere collocato a schermo intero chiamando il metodo Element.requestFullscreen(). Se non é settato l'iframe non puó collocari a schermo intero.
webkitallowfullscreen
Usa allowfullscreen invece. Per Chrome 17 o superiori. Se questo attributo è settato a true l'iframe puó essere collocato a schermo intero chiamando il metodo Element.requestFullscreen(). Se non é settato l'iframe non puó collocari a schermo intero.
mozapp Only available on Firefox OS
Per iframe ospitati da open web app, questo attributo specifica l'URL all' app manifest. Questo attributo assicura che l'iframe é visualizzato con i giusti permessi.
mozbrowser Only available on Firefox OS
Indica che l'iframe deve apparire come una pagina top-level. Questo significa che window.top, window.parent, window.frameElement, etc. non rifletteranno la gerarchia dei frame.
name
Il nome dell' iframe.
referrerpolicy
A string indicating which referrer to use when fetching the resource:
  • "no-referrer" meaning that the Referer: header will not be sent.
  • "no-referrer-when-downgrade" meaning that no Referer: header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
  • "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
  • "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
  • "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
remote Only available on Firefox OS
Load the frame's page in a separate content process.
scrolling HTML 4 only
Indica se l'iframe deve fornire una scroll bar. I valori sono:
  • auto: solo quando necessario.
  • yes: fornisci sempre una scroll bar.
  • no: Non fornire mai una scroll bar.
sandbox HTML5 only
If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can either be an empty string (all the restrictions are applied), or a space-separated list of tokens that lift particular restrictions. Valid tokens are:
  • allow-forms: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.
  • allow-modals: Allows the embedded browsing context to open modal windows.
  • allow-orientation-lock: Allows the embedded browsing context to disable the ability to lock the screen orientation.
  • allow-pointer-lock: Allows the embedded browsing context to use the Pointer Lock API.
  • allow-popups: Allows popups (like from window.open, target="_blank", showModalDialog). If this keyword is not used, that functionality will silently fail.
  • allow-popups-to-escape-sandbox:  Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page.
  • allow-presentation: Allows embedders to have control over whether an iframe can start a presentation session.
  • allow-same-origin: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.
  • allow-scripts: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
  • allow-top-navigation: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.

Note:

  • When the embedded document has the same origin as the main page, it is strongly discouraged to use both allow-scripts and allow-same-origin at the same time, as that allows the embedded document to programmatically remove the sandbox attribute. Although it is accepted, this case is no more secure than not using the sandbox attribute.
  • Sandboxing in general is only of minimal help if the attacker can arrange for the potentially hostile content to be displayed in the user's browser outside a sandboxed iframe. It is recommended that such content should be served from a separate dedicated domain, to limit the potential damage.
  • The sandbox attribute is not supported in Internet Explorer 9 and earlier versions.
src
L'URL della pagina da visualizzare all'interno dell'iframe.The URL of the page to embed. Usa 'about:blank' per pagine vuote affinchè esse siano conformi a Same-Origin Policy.
srcdoc HTML5 only
The content of the page that the embedded context is to contain. This attribute is expected to generally be used together with the sandbox attribute. If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present). Note that if the content of the attribute contains a script tag then a closing script tag is required for the script to run, even if nothing else comes after the script.
width
Indica la larghezza del frame HTML5 in CSS pixels, o HTML 4.01 in pixels o in percentuale.

Scripting

Dal DOM gli script possono accedere all'oggetto window dell'iframe attraverso la proprietà contentDocument. Non é supportato dalle versioni di Internet Explorer inferiori alla IE8.

Dall'iframe, uno script puó accedere alla window del parent attravero Window.parent.

Per via della  same-origin policy, gli script non posono accedere alle proprieta' degli altri oggetti window. Comunicazioni cross-domain possono sempre avvenire con Window.postMessage().

Exampi

Di seguito alcuni esempi che dimostrano l'utilizzo dell'elemento <iframe>.

Un semplice <iframe>

Se l'utente clicca su un bottone, il suo titolo dell'iframe viene letto e visualizzato su un alert.

HTML

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Result

Open a link in an <iframe> in another tab

In questo esempio, una mappa Google viene visualizzata in un iframe.

HTML

<base target="_blank">
<iframe id="Example2"
    title="Example2"
    width="400"
    height="300"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe>

<br>
<small>
  <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a>
</small>

Result

Risultato

Live example

Note

Starting in Gecko 6.0, rendering of inline frames correctly respects the borders of their containing element when they're rounded using border-radius.

Specifiche

Specification Status Comment
Referrer Policy
The definition of 'referrerpolicy attribute' in that specification.
Working Draft Added the referrerpolicy attribute.
WHATWG HTML Living Standard
The definition of '<iframe>' in that specification.
Living Standard  
HTML5
The definition of '<iframe>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<iframe>' in that specification.
Recommendation  
Screen Orientation API Working Draft Adds allow-orientation-lock to the sandbox attribute.
Presentation API
The definition of 'allow-presentation' in that specification.
Candidate Recommendation Adds allow-presentation to the sandbox attribute

Compatibilitá dei Browser

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) (Yes)[1] (Yes) (Yes) (Yes)[2]
sandbox 4.0 (Yes) 17.0 (17.0) 10 15 5
srcdoc 20.0 (Yes) 25.0 (25.0) No support 15 6
allowfullscreen 17.0 webkit
27.0
(Yes) 9.0 (9.0) moz
18.0 (18.0)

11 ms

(Yes) (Yes) webkit
7
sandbox="allow-popups" (Yes) (Yes) 28.0 (28.0) ? ? ?
sandbox="allow-popups-to-escape-sandbox" 46.0 No support 49.0 (49.0) ? 32 ?
sandbox="allow-modals" ? No support 49.0 (49.0) ? ? ?
referrerpolicy 51.0 No support 50.0 (50.0) ? ? ?
sandbox="allow-presentation" 53.0 No support ? ?

40

?
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes)

(Yes)

(Yes) (Yes)[1] (Yes) (Yes) (Yes)

(Yes)

sandbox 2.2

(Yes)

(Yes) 17.0 (17.0) 10 No support 4.2

(Yes)

srcdoc ? ? (Yes) 25.0 (25.0) No support ? ? ?
allowfullscreen ? ? (Yes) 9.0 (9.0) moz
18.0 (18.0)
No support No support (Yes) webkit
7
?
sandbox="allow-popups" ? ? No support 27.0 (27.0) ? ? ? ?
sandbox="allow-popups-to-escape-sandbox" No support 46 No support 49.0 (49.0) ? 32 ? 46.0
sandbox="allow-modals" ? ? No support 49.0 (49.0) ? ? ? ?
referrerpolicy No support 51.0 No support 50.0 (50.0) ? ? ? 51.0
sandbox="allow-presentation" No support No support No support ? ?

40

? 53.0

[1] La proprieta' CSS resize non ha alcun effetto per via del bug 680823.

[2] Safari has a well-known 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.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: mikspi
 Ultima modifica di: mikspi,