--- title: slug: Web/HTML/Element/iframe tags: - Content - Element - HTML - Reference - Web - embedded translation_of: Web/HTML/Element/iframe --- {{HTMLRef}} Sumari L'element HTML Marc en Línia (<iframe>) representa un context de navegació imbricada, la incrustació efectiva d'una altra pàgina HTML a la pàgina actual. En HTML 4.01, un document pot contenir un head i un body o un head i un conjunt de marcs, però no tots dos un body i un conjunt de marcs. No obstant això, un <iframe> es pot utilitzar dins del cos d'un document normal. Cada context de navegació té el seu propi historial de sessió i document actiu. El context de navegació que conté el contingut incrustat es diu context de navegació dels pares. El context de navegació de nivell superior (que no té pare) és normalment la finestra del navegador. Categories de contingut Contingut dinàmic, phrasing content, contingut incrustat, contingut interactiu, contingut palpable. Contingut permès Especial, veure la prova Omissió de l'etiqueta {{no_tag_omission}} Elements pares permesos Qualsevol element que accepti contingut incrustat. Interfície DOM {{domxref("HTMLIFrameElement")}} Atributs Aquest element inclou els atributs globals. {{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}} L'alineació d'aquest element respecte al context que l'envolta. {{htmlattrdef("allowfullscreen")}} Aquest atribut es pot establir en true si el marc ha de ser col·locat en mode de pantalla completa cridant al seu mètode {{domxref("Element.requestFullScreen()")}}. Si no està establert, no es pot col·locar l'element en mode de pantalla completa. {{htmlattrdef("frameborder")}} {{HTMLVersionInline(4)}} only El valor 1 (per defecte) li diu al navegador que traci una vora entre aquest marc i per cada marc existent. El valor 0 indica el navegador no dibuixar cap vora entre aquest marc i d'altres marcs. {{htmlattrdef("height")}} Indica l'alçada del marc {{HTMLVersionInline(5)}} en píxels CSS, o {{HTMLVersionInline(4.01)}} en píxels o com a percentatge. {{htmlattrdef("longdesc")}} {{HTMLVersionInline(4)}} only Un URI a una descripció llarga del marc. A causa del mal ús generalitzat, això no és útil per als navegadors no visuals. {{htmlattrdef("marginheight")}} {{HTMLVersionInline(4)}} only La quantitat d'espai en píxels entre el contingut del marc i els seus marges superior i inferior. {{htmlattrdef("marginwidth")}} {{HTMLVersionInline(4)}} only La quantitat d'espai en píxels entre el contingut del marc i els seus marges esquerre i dret. {{htmlattrdef("mozallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}} Utilitzeu en el seu lloc allowfullscreen. En Gecko 9.0 o posterior, aquest atribut es pot establir en true si es permet al marc col·locar-ho en mode de pantalla completa cridant el seu mètode {{domxref("element.mozRequestFullScreen()")}}. Si això no s'ha establert, l'element no es pot posar en mode de pantalla completa. {{htmlattrdef("webkitallowfullscreen")}} {{non-standard_inline}} {{deprecated_inline}} Utilitzeu en el seu lloc allowfullscreen. En Chrome 17 o posterior (i potser abans), aquest atribut es pot establir en true si es permet al marc col·locar-ho en mode de pantalla completa cridant el seu mètode {{domxref("element.webkitRequestFullScreen()")}}. Si això no s'ha establert, l'element no es pot posar en mode de pantalla completa. {{htmlattrdef("mozapp")}} {{non-standard_inline}} Per als marcs d'allotjament d'una aplicació web de codi obert, això especifica l'URL del manifest d'aplicació. Això assegura que l'aplicació es carrega amb els permisos adequats. Consulteu Ús de l'API del Navegador per a més informació. Disponible en Gecko 13.0 i posteriors. {{htmlattrdef("mozbrowser")}} {{non-standard_inline}} Indica que el marc aparegui com una finestra de l'explorador de nivell superior per al contingut incrustat. Això vol dir que {{domxref("window.top")}}, {{domxref("window.parent")}}, {{domxref("window.frameElement")}}, etc., no reflectirà la jerarquia del marc. Això permet a un navegador web UI ser implementat en la seva totalitat amb la tecnologia web, donat els permisos adequats. Consulteu Ús de l'API del Navegador per a més informació. Disponible en Gecko 13.0 i posteriors. {{htmlattrdef("name")}} Un nom per al context de navegació incrustat (o marc). Això pot ser usat com el valor de l'atribut target d'un element {{HTMLElement("a")}} o {{HTMLElement("form")}}, o l'atribut formtarget d'un element {{HTMLElement("input")}} o {{HTMLElement("button")}}. {{htmlattrdef("referrerpolicy")}} {{experimental_inline}} Una cadena que indica la referéncia a utilitzar quan s'està obtenint el recurs: "no-referrer" significa que del Referer: no s'enviarà la capçalera. "no-referrer-when-downgrade" significa que no hi ha Referer: la capçalera serà enviada al navegar a un origen sense TLS (HTTPS). Aquest és el comportament per defecte d'un agent d'usuari, si no hi ha política que especifiqui el contrari. "origin" significa que la referéncia serà l'origen de la pàgina, que és més o menys l'esquema, el host i el port. "origin-when-cross-origin" significa que les navegacions d'altres orígens es limitarà a l'esquema, el host i el port, mentre que les navegacions en el mateix origen inclouran el camí de les referéncies. "unsafe-url" significa que la referéncia inclourà l'origen i la ruta d'accés (però no el fragment, la contrasenya o nom d'usuari). Aquest cas no és segur, ja que pot filtrar-se orígens i trajectòries dels recursos protegits-TLS a orígens insegurs {{htmlattrdef("remote")}} {{non-standard_inline}} Carrega la pàgina del marc en un procés de contingut independent. {{htmlattrdef("scrolling")}} {{HTMLVersionInline(4)}} only Atribut enumerat indicant quan el navegador ha de proporcionar una barra de desplaçament (o un altre dispositiu de desplaçament) per a el marc: auto: Només quan sigui necessari. yes: Sempre proporciona una barra de desplaçament. no: Mai proporciona una barra de desplaçament. {{htmlattrdef("sandbox")}} {{HTMLVersionInline(5)}} only Si s'especifica com una cadena buida, aquest atribut permet restriccions addicionals en el contingut que pugui aparèixer en el marc en línia. El valor de l'atribut pot ser una cadena buida (s'apliquen totes les restriccions), o una llista separada per espais d'identificadors que aixequen restriccions particulars. Els identificadors vàlids són: allow-forms: Permet al context de navegació incrustat enviar formularis. Si no s'utilitza aquesta paraula clau, no es permet aquesta operació. allow-modals: Permet al context de navegació incrustat obrir finestres modals. allow-orientation-lock: Permet al context de navegació incrustat desactivar la capacitat de bloquejar l'orientació de la pantalla. allow-pointer-lock: Permet al context de navegació incrustat utilitzar l'API de bloqueig del punter ( Pointer Lock API ). allow-popups: Permet finestres emergents (com window.open, target="_blank", showModalDialog). Si no s'utilitza aquesta paraula clau, aquesta funcionalitat fallarà sense avisar. allow-popups-to-escape-sandbox: Permet a un document en espai aïllat (sandbox) obrir noves finestres sense forçar les senyals d'espai aïllat sobre ellas. Això permetrà, per exemple, una publicitat de tercers, per ser un espai aïllat de seguretat sense forçar les mateixes restriccions en una pàgina de destinació. allow-presentation: Permet als incrustats tenir control sobre si un iframe pot iniciar una sessió de presentació. allow-same-origin: Permet que el contingut sigui tractat com a tal des del seu origen normal. Si no s'utilitza aquesta paraula clau, el contingut incrustat es tracta com d'un origen únic. allow-scripts: Permet al context de navegació incrustat executar scripts (però no crear finestres emergents). Si no s'utilitza aquesta paraula clau, no es permet aquesta operació. allow-top-navigation: Permet al context de navegació incrustat navegar pel contingut (càrrega) del context de navegació de nivell superior. Si no s'utilitza aquesta paraula clau, no es permet aquesta operació. Nota: Quan el document incrustat té el mateix origen que la pàgina principal, no és recomanable utilitzar al mateix temps tant allow-scripts i allow-same-origin, lo que permet que en el document incrustat mitjançant programació poguer eliminar l'atribut sandbox. Encara que s'accepta, aquest cas no és més segur que no fer servir l'atribut sandbox. El espai aïllat (Sandboxing), en general, és només una ajuda mínima si l'atacant pot organitzar el contingut potencialment hostil que es mostrarà en el navegador de l'usuari fora d'un iframe d'espai aïllat. Es recomana que aquest contingut ha de servir-se de un domini dedicat separat, per limitar el dany potencial. L'atribut sandbox no és compatible amb Internet Explorer 9 i versions anteriors. {{htmlattrdef("src")}} La URL de la pàgina per incrustar. {{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} only El contingut de la pàgina que conté el context integrat. S'espera que aquest atribut sigui generalment usat junt amb l'atribut sandbox. Si un navegador suporta l'atribut srcdoc, anul·larà el contingut especificat en l'atribut src (si està present). Si un navegador NO suporta l'atribut srcdoc, es mostrarà el fitxer especificat per l'atribut src en el seu lloc (si està present). Recordeu que si el contingut de l'atribut conté una etiqueta script, serà necessaria una etiqueta script de tancament per a l'execució del script, fins i tot sinó es produeix res mes després del script {{htmlattrdef("width")}} Indica l'amplada del marc {{HTMLVersionInline(5)}} en píxels CSS, o {{HTMLVersionInline(4.01)}} en píxels o com a percentatg Scripting Els marcs en línia, com a elements de {{HTMLElement ("frame")}}, introduïu el pseudo-array {{domxref("window.frames")}}. Des de l'element iframe DOM, els scripts poden acedir al objecte {{domxref("window")}} inclòs en la pàgina HTML mitjançant la propietat contentWindow. La propietat contentDocument es refereix a l'element del document dins del iframe (és equivalent a contentWindow.document), però no és compatible amb les versions d'Internet Explorer anteriors a IE8. Des de l'interior d'un marc, un script pot obtenir una referència a la finestra pare a través de {{domxref ("Window.parent")}} . Els scripts que tracten d'accedir al contingut d'un marc estan subjectes a la política del mateix origen, i no poden accedir a la majoria de les propietats en l'altre objecte finestra si estigués carregada des d'un domini diferent. Això també s'aplica a un script dins d'un marc, d'intentar accedir a la seva finestra pare. La comunicació entre dominis encara es pot aconseguir amb {{domxref("Window.postMessage()")}}. Exemples Aquí hi ha alguns exemples que demostren l'ús de l'element <iframe>. Un simple <iframe> Aquest és un exemple bàsic d'un <iframe> en acció. Després de crear el marc, quan l'usuari fa clic a un botó, el seu títol es recupera i es mostra en un avís. 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> Resultat {{ EmbedLiveSample('Example1', '', '', '', 'Web/HTML/Element/iframe') }} Obrir un enllaç en un <iframe> en una altra pestanya En aquest exemple, un mapa de Google es mostrarà en un marc; HTML <base target="_blank"> <iframe id="Example2" name="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> Resultat {{ EmbedLiveSample('Example2', '', '', '', 'Web/HTML/Element/iframe') }} Resultat Exemple viu Notes A partir d'{{Gecko ("6.0")}}, la representació de marcs en línia respecta correctament les vores del seu element contenidor quan estan arrodonides usant {{cssxref("border-radius")}}. Especificacions Especificació Estat Comentari {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}} {{Spec2('Referrer Policy')}} Afegeix l'atribut referrerpolicy. {{SpecName('HTML WHATWG', 'the-iframe-element.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')}} Afegeix allow-orientation-lock a l'atribut sandbox. {{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}} {{Spec2('Presentation')}} Afegeix allow-presentation a l'atribut sandbox. Navegadors compatibles {{CompatibilityTable}} Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Suport bàsic {{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)}} {{CompatNo}} {{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}} {{CompatUnknown}} {{CompatGeckoDesktop("49.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} referrerpolicy {{CompatChrome(51.0)}} {{CompatNo}} {{CompatGeckoDesktop("50.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} sandbox="allow-presentation" {{CompatChrome(53.0)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatOpera(40)}} {{CompatUnknown}} Característica Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android Suport bàsic {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1] {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} sandbox 2.2 {{CompatVersionUnknown}} {{CompatGeckoMobile("17.0")}} 10 {{CompatNo}} 4.2 {{CompatVersionUnknown}} srcdoc {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("25.0")}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} allowfullscreen {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("9.0")}} {{property_prefix("moz")}} {{CompatGeckoMobile("18.0")}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{property_prefix("webkit")}} 7 {{CompatUnknown}} sandbox="allow-popups" {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("27.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} sandbox="allow-popups-to-escape-sandbox" {{CompatNo}} {{CompatChrome(46)}} {{CompatGeckoMobile("49.0")}} {{CompatUnknown}} 32 {{CompatUnknown}} {{CompatChrome(46.0)}} sandbox="allow-modals" {{CompatUnknown}} {{CompatUnknown}} {{CompatGeckoMobile("49.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} referrerpolicy {{CompatNo}} {{CompatChrome(51.0)}} {{CompatGeckoMobile("50.0")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(51.0)}} sandbox="allow-presentation" {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatOperaMobile(40)}} {{CompatUnknown}} {{CompatChrome(53.0)}} [1] La propietat CSS {{cssxref("resize")}} no té cap efecte sobre aquest element a causa del {{bug("680823")}}. [2] Safari té un error conegut que impedeix que es carregui iframes si l'element iframe s'oculta quan s'afegeix a la pàgina. iframeElement.src = iframeElement.src ha de fer que es carregui el iframe.
L'element HTML Marc en Línia (<iframe>) representa un context de navegació imbricada, la incrustació efectiva d'una altra pàgina HTML a la pàgina actual. En HTML 4.01, un document pot contenir un head i un body o un head i un conjunt de marcs, però no tots dos un body i un conjunt de marcs. No obstant això, un <iframe> es pot utilitzar dins del cos d'un document normal. Cada context de navegació té el seu propi historial de sessió i document actiu. El context de navegació que conté el contingut incrustat es diu context de navegació dels pares. El context de navegació de nivell superior (que no té pare) és normalment la finestra del navegador.
<iframe>
head
body
<iframe
Aquest element inclou els atributs globals.
true
Indica l'alçada del marc {{HTMLVersionInline(5)}} en píxels CSS, o {{HTMLVersionInline(4.01)}} en píxels o com a percentatge.
La quantitat d'espai en píxels entre el contingut del marc i els seus marges superior i inferior.
allowfullscreen
target
"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
Nota:
tant allow-scripts
iframe
sandbox
src
srcdoc
Els marcs en línia, com a elements de {{HTMLElement ("frame")}}, introduïu el pseudo-array {{domxref("window.frames")}}.
Des de l'element iframe DOM, els scripts poden acedir al objecte {{domxref("window")}} inclòs en la pàgina HTML mitjançant la propietat contentWindow. La propietat contentDocument es refereix a l'element del document dins del iframe (és equivalent a contentWindow.document), però no és compatible amb les versions d'Internet Explorer anteriors a IE8.
contentWindow
contentDocument
contentWindow.document
Des de l'interior d'un marc, un script pot obtenir una referència a la finestra pare a través de {{domxref ("Window.parent")}} .
Els scripts que tracten d'accedir al contingut d'un marc estan subjectes a la política del mateix origen, i no poden accedir a la majoria de les propietats en l'altre objecte finestra si estigués carregada des d'un domini diferent. Això també s'aplica a un script dins d'un marc, d'intentar accedir a la seva finestra pare. La comunicació entre dominis encara es pot aconseguir amb {{domxref("Window.postMessage()")}}.
Aquí hi ha alguns exemples que demostren l'ús de l'element <iframe>.
Aquest és un exemple bàsic d'un <iframe> en acció. Després de crear el marc, quan l'usuari fa clic a un botó, el seu títol es recupera i es mostra en un avís.
<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') }}
En aquest exemple, un mapa de Google es mostrarà en un marc;
<base target="_blank"> <iframe id="Example2" name="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') }}
Exemple viu
A partir d'{{Gecko ("6.0")}}, la representació de marcs en línia respecta correctament les vores del seu element contenidor quan estan arrodonides usant {{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 propietat CSS {{cssxref("resize")}} no té cap efecte sobre aquest element a causa del {{bug("680823")}}.
[2] Safari té un error conegut que impedeix que es carregui iframes si l'element iframe s'oculta quan s'afegeix a la pàgina. iframeElement.src = iframeElement.src ha de fer que es carregui el iframe.