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ètodeElement.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ètodeelement.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ètodeelement.webkitRequestFullScreen()
. Si això no s'ha establert, l'element no es pot posar en mode de pantalla completa. mozapp
- 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
- 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 delReferer
: no s'enviarà la capçalera.- "
no-referrer-when-downgrade
" significa que no hi haReferer
: 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
- 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 (comwindow.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
iallow-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'atributsrc
(si està present). Si un navegador NO suporta l'atributsrcdoc
, es mostrarà el fitxer especificat per l'atributsrc
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&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
Resultat
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. |
Candidate Recommendation | Afegeix l'atribut referrerpolicy . |
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. |
Candidate Recommendation | 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.