--- title: slug: Web/HTML/Element/iframe translation_of: Web/HTML/Element/iframe --- {{HTMLRef}} 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 (genitore). Content categories Flow content, phrasing content, embedded content, interactive content, palpable content. Permitted content Special, see prose Tag omission {{no_tag_omission}} Permitted parents Any element that accepts embedded content. Permitted ARIA roles {{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}} DOM interface {{domxref("HTMLIFrameElement")}} Attributi L'elemento <iframe> possiede i seguenti attributi. {{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}} L'allineamento dell'iframe rispetto al contesto circostante. {{htmlattrdef("allowfullscreen")}} Se questo attributo è settato a true l'iframe puó essere collocato a schermo intero chiamando il metodo {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero. {{htmlattrdef("frameborder")}} {{HTMLVersionInline(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. {{htmlattrdef("height")}} Indica l'altezza dell'iframe {{HTMLVersionInline(5)}} in CSS pixels. {{htmlattrdef("longdesc")}} {{HTMLVersionInline(4)}} only Non é supportato in HTML5. É un URI di una descrizione del frame. {{htmlattrdef("marginheight")}} {{HTMLVersionInline(4)}} only Non é supportato in HTML5. É il margine superiore ed inferiore in pixel. {{htmlattrdef("marginwidth")}} {{HTMLVersionInline(4)}} only Non é supportato in HTML5. É il margine destro e sinistro in pixel. {{htmlattrdef("mozallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}} 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 {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero. {{htmlattrdef("webkitallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}} 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 {{domxref("Element.requestFullscreen()")}}. Se non é settato l'iframe non puó collocari a schermo intero. {{htmlattrdef("mozapp")}} {{non-standard_inline}} 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. {{htmlattrdef("mozbrowser")}} {{non-standard_inline}} Indica che l'iframe deve apparire come una pagina top-level. Questo significa che {{domxref("window.top")}}, {{domxref("window.parent")}}, {{domxref("window.frameElement")}}, etc. non rifletteranno la gerarchia dei frame. {{htmlattrdef("name")}} Il nome dell' iframe. {{htmlattrdef("referrerpolicy")}} {{experimental_inline}} 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. {{htmlattrdef("remote")}} {{non-standard_inline}} Load the frame's page in a separate content process. {{htmlattrdef("scrolling")}} {{HTMLVersionInline(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. {{htmlattrdef("sandbox")}} {{HTMLVersionInline(5)}} 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. {{htmlattrdef("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. {{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} 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. {{htmlattrdef("width")}} Indica la larghezza del frame {{HTMLVersionInline(5)}} in CSS pixels, o {{HTMLVersionInline(4.01)}} in pixels o in percentuale. Scripting Dal DOM gli script possono accedere all'oggetto {{domxref("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 {{domxref("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 {{domxref("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 {{ EmbedLiveSample('Example1', '', '', '', 'Web/HTML/Element/iframe') }} 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&source=s_q&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> </iframe> <br> <small> <a href="https://maps.google.com/maps?f=q&source=embed&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a> </small> Risultato {{ EmbedLiveSample('Example2', '', '', '', 'Web/HTML/Element/iframe') }} 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 {{cssxref("border-radius")}}. Specifiche Specification Status Comment {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}} {{Spec2('Referrer Policy')}} Added the referrerpolicy attribute. {{SpecName('HTML WHATWG', 'embedded-content.html#the-iframe-element', '<iframe>')}} {{Spec2('HTML WHATWG')}} {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}} {{Spec2('HTML5 W3C')}} {{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}} {{Spec2('HTML4.01')}} {{SpecName('Screen Orientation')}} {{Spec2('Screen Orientation')}} Adds allow-orientation-lock to the sandbox attribute. {{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}} {{Spec2('Presentation')}} Adds allow-presentation to the sandbox attribute Compatibilitá dei Browser {{CompatibilityTable}} Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Basic support {{CompatChrome(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1] {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}[2] sandbox {{CompatChrome(4.0)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("17.0")}} 10 15 5 srcdoc {{CompatChrome(20.0)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("25.0")}} {{CompatNo}} 15 6 allowfullscreen {{CompatChrome(17.0)}} {{property_prefix("webkit")}} {{CompatChrome(27.0)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("9.0")}} {{property_prefix("moz")}} {{CompatGeckoDesktop("18.0")}} 11 {{property_prefix("ms")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{property_prefix("webkit")}} 7 sandbox="allow-popups" {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("28.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} sandbox="allow-popups-to-escape-sandbox" {{CompatChrome(46.0)}} {{CompatNo}} {{CompatGeckoDesktop("49.0")}} {{CompatUnknown}} 32 {{CompatUnknown}} sandbox="allow-modals" {{CompatUnknown}} {{CompatNo}} {{CompatGeckoDesktop("49.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} referrerpolicy {{CompatChrome(51.0)}} {{CompatNo}} {{CompatGeckoDesktop("50.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} sandbox="allow-presentation" {{CompatChrome(53.0)}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatOpera(40)}} {{CompatUnknown}} Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1] {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} sandbox 2.2 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("17.0")}} 10 {{CompatNo}} 4.2 {{CompatVersionUnknown}} srcdoc {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("25.0")}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} allowfullscreen {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("9.0")}} {{property_prefix("moz")}} {{CompatGeckoMobile("18.0")}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{property_prefix("webkit")}} 7 {{CompatUnknown}} sandbox="allow-popups" {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}} {{CompatGeckoMobile("27.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} sandbox="allow-popups-to-escape-sandbox" {{CompatNo}} {{CompatChrome(46)}} {{CompatNo}} {{CompatGeckoMobile("49.0")}} {{CompatUnknown}} 32 {{CompatUnknown}} {{CompatChrome(46.0)}} sandbox="allow-modals" {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}} {{CompatGeckoMobile("49.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} referrerpolicy {{CompatNo}} {{CompatChrome(51.0)}} {{CompatNo}} {{CompatGeckoMobile("50.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(51.0)}} sandbox="allow-presentation" {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatOperaMobile(40)}} {{CompatUnknown}} {{CompatChrome(53.0)}} [1] La proprieta' CSS {{cssxref("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.
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 (genitore).
<iframe>
L'elemento <iframe> possiede i seguenti attributi.
true
allowfullscreen
"no-referrer"
Referer:
no-referrer-when-downgrade
"origin"
"unsafe-url"
auto
yes
no
allow-forms
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
window.open
target="_blank"
showModalDialog
allow-popups-to-escape-sandbox
allow-presentation
allow-same-origin
allow-scripts
allow-top-navigation
Note:
sandbox
iframe
srcdoc
src
Dal DOM gli script possono accedere all'oggetto {{domxref("window")}} dell'iframe attraverso la proprietà contentDocument. Non é supportato dalle versioni di Internet Explorer inferiori alla IE8.
contentDocument
Dall'iframe, uno script puó accedere alla window del parent attravero {{domxref("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 {{domxref("Window.postMessage()")}}.
Di seguito alcuni esempi che dimostrano l'utilizzo dell'elemento <iframe>.
Se l'utente clicca su un bottone, il suo titolo dell'iframe viene letto e visualizzato su un alert.
<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>
{{ EmbedLiveSample('Example1', '', '', '', 'Web/HTML/Element/iframe') }}
In questo esempio, una mappa Google viene visualizzata in un iframe.
<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&source=s_q&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed"> </iframe> <br> <small> <a href="https://maps.google.com/maps?f=q&source=embed&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a> </small>
{{ EmbedLiveSample('Example2', '', '', '', 'Web/HTML/Element/iframe') }}
Live example
Starting in {{Gecko("6.0")}}, rendering of inline frames correctly respects the borders of their containing element when they're rounded using {{cssxref("border-radius")}}.
referrerpolicy
{{CompatibilityTable}}
11 {{property_prefix("ms")}}
sandbox="allow-popups"
sandbox="allow-popups-to-escape-sandbox"
sandbox="allow-modals"
sandbox="allow-presentation"
{{CompatOpera(40)}}
{{CompatVersionUnknown}}
{{CompatOperaMobile(40)}}
[1] La proprieta' CSS {{cssxref("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.