<iframe> - HTML

HTML <iframe> elementet. Sandbox, allowfullscreen og srcdoc attributterne

Introduktion

Denne side handler indtil videre primært kun om sandbox, allowfullscreen og srcdoc attributterne til <iframe> tagget.

Browsertest


Lader ikke altid til at JavaScript kan fortælle om det er understøttet rigtigt.

Browserunderstøttelse af sandbox og allowfullscreen attributter i iframe

Browser sandbox attribut allowfullscreen og seamless attribut
Firefox logo
Firefox 17.0
ja mozallowfullscreen
Opera logo
Opera 12.10
nej
Safari logo
Safari 5.1.7
ja webkitallowfullscreen
Chrome logo
Chrome 23.0.1271.64 m
ja webkitallowfullscreen
seamless
Internet Explorer logo
Internet Explorer 11.0.9431.0 Developer Preview
ja allowfullscreen
Alle tests er udført på Windows 7 (64-bit)


Browserunderstøttelse fra caniuse.com :

Element og attributter

Her ses hvordan <iframe> bruges med tilhørende attributter i HTML5.

Sandbox

Når man bruger sandbox attributten på en <iframe> og browseren understøtter det så slås diverse ting fra i den iframe.

For eksempel kan man ikke udføre JavaScript og sende formularer (<form>) og starte plugins (flash) i den <iframe>.

sandbox attributten kan bruges hvis der er andre som har skrevet det der vises sådan at man kan undgå kode der eventuelt er dårlig for hjemmesiden.

Her er en iframe uden sandbox.

Her er en iframe med sandbox (så blandt andet JavaScript er slået fra).

Her er en iframe med sandbox hvor nogle ting er tilladte.

Resultatet ovenfor er skabt af følgende kode

allow-pointer-lock kan desuden bruges til at tillade pointer lock i en <iframe> med sandbox.
allow-pointer-lock skulle virke fra Chrome 23 men jeg har endnu ikke teste det i nogen browsere.

allow-popups kan bruges til at tillade at der åbnes nye vinduer/faneblade som ved brug af target="_blank" og window.open().

http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element.

MIME typen "text/html-sandboxed"

text/html-sandboxed MIME typen er blevet droppet.
Potentially hostile files can be served from the same server as the file containing the iframe element by labeling them as text/html-sandboxed instead of text/html. This ensures that scripts in the files are unable to attack the site (as if they were actually served from another server), even if the user is tricked into visiting those pages directly, without the protection of the sandbox attribute.

Jeg har prøvet at sende filer med "text/html-sandboxed" MIME typen men det sker bare det at i nogle browsere vises den originale kildekode som tekst og i andre browsere der downloades den originale kildekode som en filen.
Og det er jo ikke sikkert det er så smart at sende den originale kildekode.
Måske gør jeg det forkert. Eller måske er der ingen af browserne jeg har prøvet som understøtter det.

Allowfullscreen

Det er normalt ikke tilladt at aktiver fuldskærm tilstand fra en <iframe>, men ved at tilføje allowfullscreen attributten bliver det tilladt.

Her følger 2 <iframe> hvor den samme side er vist i.

I denne <iframe> er fuldskærm tilstand ikke tilladt.


I denne <iframe allowfullscreen mozallowfullscreen webkitallowfullscreen> er fuldskærm tilstand tilladt.

Seamless

seamless attributten bruges på <iframe> til at undgå border (og måske scrollbar?).
CSS koder skulle kaskade igennem iframe, links navigering skulle gælde for forældre dokumentet, automatisk tilpasning.

Jeg har giver begge iframe en rød bred kant så det er let at se om browseren understøtter seamless

Her er en iframe uden seamless.

Her er en iframe med seamless.

Resultatet ovenfor er skabt af følgende kode

Srcdoc

srcdoc attributten kan bruges i <iframe> til at vise inline indhold.

srcdoc attributten i <iframe> virker fra Firefox 25.0.

I værdien i srcdoc attributten skal " udskiftes med &quot; (hvis man omgiver værdien med ").
Ellers kan man omgive værdien med '.

Hvis man tilføjer src attributten så vil den blive brugt hvis browseren ikke understøtter srcdoc attributten.


<IFRAME SRCDOC> DEMO
(PÅ EN SIDE FOR SIG SELV)

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.