<iframe>

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

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().

Esempi

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>

Risultato

Aprire un link contenuto in un <iframe> in un altro 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>

Risultato

Risultato

Live example

Note

Specifiche

Compatibilitá dei Browser

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