iFrames har länge varit en del av HTML-standarden. Däremot placerades de tillsammans med de numera föråldrade Frames i Frameset-HTML-varianten i HTML 4.0. Frames beaktas inte längre i HTML5, men de inbäddade ramarna (iFrames) gör det.
Med iFrames kan andra webbplatser bäddas in. Webbbläsaren renderar således en annan HTML-fil inuti den aktuella webbplatsen. Innehållet i iFrame-fönstret kan formateras individuellt.
När man pratar om iFrames måste säkerheten hos denna HTML-teknik naturligtvis också granskas igen separat. Ett problem här är skadlig kod som obemärkt kan införas i webbplatser via iFrames. Det är naturligtvis mycket irriterande.
I HTML5 finns dock lämpliga säkerhetsmekanismer för att hantera dessa problem. Mer om detta kommer senare i denna handledning. Innan man använder iFrames är det dock viktigt att komma ihåg att de potentiellt utgör en fara, särskilt eftersom de nya säkerhetsattributen ännu inte stöds av alla webbläsare.
I HTML5 är iFrames en del av den fasta standarden och ger några extra attribut här. Det följande exemplet visar hur iFrames kan definieras.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
I webbläsaren ser resultatet ut så här:
Källan src tilldelas iframe-elementet. Denna src innehåller som värde sidan som ska visas. Det kan vara en lokal fil. Det är också möjligt att - precis som i det visade exemplet - anropa en extern resurs.
Bredden och höjden på iFramen bestäms av de två attributen width och height. Om det inbäddade innehållet är större än den angivna storleken för iFramen, visas rullningsfält.
Mellan öppnings- och stängningsetiketten för <iframe> kan godtyckligt innehåll definieras. Detta innehåll visas dock endast i webbläsare som inte känner till iframe-elementet.
I HTM5 introduceras några nya attribut för iFrames, som främst har att göra med vad som kallas Sandbox-beteendet.
I webbläsarna gör Same Origin Policy så att en inbäddad webbplats inte kan manipuleras medan den visas. Denna säkerhetsfunktion är helt klart meningsfull. Ändå är den inte alltid idealisk. Därför infördes i HTML5 attributet sandbox, genom vilket webbläsarna tydligt kan informeras om vilka behörigheter som ska tilldelas innehållet som bäddas in i en iFrame från en extern sida.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames som är utrustade med attributet sandbox får inte åtkomst till den inbäddade webbplatsens DOM. De får heller inte köra skript eller lagra kakor. Dessa begränsningar kan hävas med olika Sandbox-värden.
Olika värden kan tilldelas sandbox-attributet. Genom allow-forms får den inbäddade webbplatsen samla in information från användare genom formulär. Användare vet inte att formuläret inte kommer från den aktuella sidan.
Om man däremot anger allow-some-origin, behandlas den inbäddade webbplatsen som om den kommer från samma värd. Detta upphäver Same Origin Policy.
Värdet allow-top-navigation tillåter innehållet att ändra innehållet i den översta bläddringskontexten.
Och sedan finns det allow-script. Detta tillåter att JavaScript ingår i den inbäddade sidan som kan manipulera den inbäddande sidan.
Här är ett exempel på hur en lämplig sandbox-instruktion kan se ut:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Men man kan också tilldela flera värden. Dessa separeras med mellanslag. Här är ett exempel på det:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames är normalt avsedda att bädda in externa innehåll. Men det går även att inkludera dem.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Denna attribut har flera implikationer. Till exempel visas målreferenser i det inkluderade dokumentet - om inget annat definierats - i webbläsarfönstret där iframe-elementet definierats. (Vid normal inbäddning visas målreferenser - om inget annat definierats - i iFrame-fönstret).seamless stöds för närvarande bara av Google Canary, utvecklarversionen av denna webbläsare.
En annan effekt rör stilarken. Stilarna i den inkluderande filen gäller också för det inkluderade dokumentet. (Vid normal inbäddning gäller inte stilangivelserna för stilarken).
Ett annat attribut har lagts till. Med srcdoc kan innehållet som ska bäddas in definieras direkt. Se följande exempel:
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>I det här fallet saknas alltså src-attributet, genom vilket den fil som ska inkluderas annars anges.
Innehållet som anges via srcdoc behandlas som om det kommer från en extern server. Det omfattas således fullt ut av samma ursprungspolitik. Det här beteendet är intressant till exempel i samband med skriptdefinitioner. Tillåtet där är valfri HTML- och JavaScript-kod. Dock måste citattecken och &-tecknet beskrivas med de angivna tecknen " respektive &.
Förresten kan ni också definiera en sida direkt här och därigenom visa önskat innehåll.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Det behöver förresten inte vara en fullständig HTML-fil. Sådant här är naturligtvis också möjligt:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
I webbläsaren ser det då ut så här:
Denna är alltså helt vanlig HTML-syntax, utan skript osv.
Några riktlinjer för attribut som hittills använts för optisk utformning: saker som scrolling, marginwidth och marginheight är inte längre tillåtna i HTML5. Dessa attribut ersätts av CSS.
