<iframe>

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.

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

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

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

Especificacions

Navegadors compatibles

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