<iframe>

This translation is incomplete. Please help translate this article from English.

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 Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries
Elements pares permesos Qualsevol element que accepti  contingut incrustat.
Interfície DOM HTMLIFrameElement

Atributs

Aquest element inclou els atributs globals.

align Deprecated since HTML4.01, Obsolete since HTML5
L'alineació d'aquest element respecte al context que l'envolta.
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 Element.requestFullScreen(). Si no està establert, no es pot col·locar l'element en mode de pantalla completa.
frameborder HTML 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.
height

Indica l'alçada del marc HTML5 en píxels CSS, o HTML 4.01 en píxels o com a percentatge.

longdesc HTML 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.
marginheight HTML 4 only

La quantitat d'espai en píxels entre el contingut del marc i els seus marges superior i inferior.

marginwidth HTML 4 only
La quantitat d'espai en píxels entre el contingut del marc i els seus marges esquerre i dret.
mozallowfullscreen
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 element.mozRequestFullScreen(). Si això no s'ha establert, l'element no es pot posar en mode de pantalla completa.
webkitallowfullscreen
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 element.webkitRequestFullScreen(). Si això no s'ha establert, l'element no es pot posar en mode de pantalla completa.
mozapp Only available on Firefox OS
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.
mozbrowser Only available on Firefox OS
Indica que el marc aparegui com una finestra de l'explorador de nivell superior per al contingut incrustat. Això vol dir que window.top, window.parent, 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.
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 <a> o <form>, o l'atribut formtarget d'un element <input> o <button>.
referrerpolicy
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
remote Only available on Firefox OS
Carrega la pàgina del marc en un procés de contingut independent.
scrolling HTML 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.
sandbox HTML5 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.
src
La URL de la pàgina per incrustar.
srcdoc HTML5 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
width
Indica l'amplada del marc HTML5 en píxels CSS, o HTML 4.01 en píxels o com a percentatg

Scripting

Els marcs en línia, com a elements de <frame>, introduïu el pseudo-array window.frames.

Des de l'element iframe DOM, els scripts poden acedir al objecte 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 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

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&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>

Resultat

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 border-radius.

Especificacions

Especificació Estat Comentari
Referrer Policy
The definition of 'referrerpolicy attribute' in that specification.
Working Draft Afegeix l'atribut referrerpolicy.
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 Afegeix allow-orientation-lock a l'atribut sandbox.
Presentation API
The definition of 'allow-presentation' in that specification.
Editor's Draft Afegeix allow-presentation a l'atribut sandbox.

Navegadors compatibles

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 (Yes) (Yes)[1] (Yes) (Yes) (Yes)[2]
sandbox 4.0 (Yes) 17.0 (17.0) 10 15 5
srcdoc 20.0 No support 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" ? ? 49.0 (49.0) ? ? ?
referrerpolicy 51.0 No support 50.0 (50.0) ? ? ?
sandbox="allow-presentation" 53.0 ? ? ?

40

?
Característica Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Suport bàsic (Yes)

(Yes)

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

(Yes)

sandbox 2.2

(Yes)

17.0 (17.0) 10 No support 4.2

(Yes)

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

40

? 53.0

[1] La propietat CSS resize no té cap efecte sobre aquest element a causa del errada 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.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,