Els marcs integrats us permeten incloure contingut d'orígens externs a les vostres pàgines
Els marcs en línia, normalment denominats "iframes", són l'únic tipus de marc permès en HTML5. Aquests marcs són bàsicament una secció de la vostra pàgina que "retalla". En l'espai que heu tret de la pàgina, podeu alimentar-lo en una pàgina web externa. En essència, un iframe és una altra finestra del navegador establerta dins de la vostra pàgina web. Veus iframes que s'utilitzen habitualment en llocs web que necessiten incloure contingut extern com un mapa de Google o un vídeo de YouTube.
Tots dos llocs web populars usen iframes en el seu codi d'inserció.
Com s'utilitza l'element IFRAME
L'element utilitza elements globals HTML5, així com diversos altres elements. Quatre també són atributs en HTML 4.01:
- -la URL de la font del marc
- -la altura de la finestra
- -la amplada de la finestra
- -el nom de la finestra
I tres són nous en HTML5:
- srcdoc: l'HTML per a la font del marc. Aquest atribut té prioritat sobre qualsevol URL de l'atribut src
- sandbox -una llista de funcions que s'han de permetre o no es permeten a la finestra del marc
- sense costura: indica a l'agent d'usuari que s'hauria de representar l'iframe, com si fos una part invisible del document principal
Per crear un iframe senzill, configureu l'URL origen i l'amplada i alçada:
Tingueu en compte que podeu triar no utilitzar valors de píxels per a la configuració del vostre iframe, però en canvi poden optar per un percentatge.
Si esteu construint un lloc web sensible que hauria de canviar el tamany amb diferents mides de pantalla, aquests percentatges seran importants.
També hi ha alguns atributs que són vàlids en HTML 4.01 però obsolets en HTML5. Com que la majoria dels llocs web actuals utilitzen HTML5 +, aquests atributs són els que no voleu utilitzar (però que podeu veure en alguns documents heretats).
- -En el seu lloc, utilitzeu un element A per enllaçar a una descripció
- -si utilitzeu la propietat flotant CSS
- Permetre la transparència, en canvi, utilitzeu la propietat de fons CSS per fer transparent el ifram
- -si utilitzeu la propietat CSS de la vora
- marginheight , en canvi, utilitzeu la propietat del marge CSS
- ample de marge, en canvi, utilitzeu la propietat del marge CSS
- -Primera, utilitzeu la propietat de desbordament de CSS
Compatibilitat amb el navegador IFRAME
L'element IFRAME és compatible amb tots els navegadors moderns:
- Android
- Chrome
- Firefox
- Internet Explorer 2+
- iOS / Safari mòbil
- Netscape 7+
- Òpera 3+
- Safari
Si no es mostra cap número de versió a la llista anterior, és a dir que totes les versions d'aquest navegador ho admeten.
Una cosa a tenir en compte és que mentre tots els navegadors admeten l'element IFRAME, encara hi ha un suport limitat per a algunes de les característiques HTML5.
- L'ús del desbordament per desactivar el desplaçament no és fiable. Si no voleu barres de desplaçament als vostres iframes, haureu de seguir utilitzant l'atribut de desplaçament.
- Els adreces srcdoc, sandbox i sense cost no són compatibles amb cap navegador en aquest moment.
Enllaç amb Iframes
Quan proporcioneu un nom o una ID a un iframes, podeu assenyalar els vostres enllaços en aquest marc amb l'atribut de l'element A. Després, quan un usuari fa clic a l'enllaç, s'obrirà dins de l'iframe referit en comptes de la finestra actual.
Proveu-ho tu mateix Escriviu el següent en una pàgina web:
Si el document obert a IFRAME no té objectius establerts, tots aquests enllaços s'obriran en el mateix iframe que el document primari .
Podeu utilitzar aquesta funció per fer que els enllaços en una IFRAME canviïn els continguts d'un altre IFRAME en la mateixa pàgina.
IFrames i seguretat
L'element IFRAME, per si mateix, no suposa cap risc de seguretat per a vostè o els vostres lectors.
Malauradament, iframes han tingut una mala reputació perquè poden ser utilitzats per llocs web maliciosos per incloure contingut que pugui infectar l'ordinador d'un visitant sense que ho vegin a la pàgina. Això es fa tenint enllaços apunten a l'IFRAME invisible i aquestes seqüències d'ordres desencadenen codi maliciós. L'usuari fa clic a l'enllaç i pensa que l'enllaç està trencat perquè no semblava haver-hi res, però es va desactivar un script on no podien veure-ho.
També hi ha virus informàtics que injectaran un IFRAME invisible a les vostres pàgines web, convertint el vostre lloc web en una botnet. Poden fer-ho mitjançant la injecció de SQL i altres atacs.
El que cal recordar en incloure un IFRAME a la vostra pàgina web és que els vostres usuaris només són tan segurs com el contingut de tots els llocs als quals us vinculi. Si teniu raó per sentir que un lloc no és de confiança, no l'enllaceu de cap manera i definitivament no inclou els seus continguts en un IFRAME. No obstant això, si enllaceu-vos a les vostres pròpies pàgines dins dels iframes, no suposa cap risc de seguretat per a vostè o per als vostres usuaris.
Article original de Jennifer Krynin. Editat el 11/7/16 per Jeremy Girard