Sider og elementer med OBJECT, EMBED og IFRAME

Af forskellige årsager kan det være en god idé at indlejre et element i en side. I dag er det især video man indlejrer, og i nogen grad pdf-dokumenter, men det er ikke de eneste anvendelser.

I slutningen af 1990'erne var frames, en forløber for den nuværende IFRAME-tag, det helt store hit, fordi den gav nogle brugbare designmuligheder man ikke tidligere havde haft. I dag bruges frames kun på nogle ganske få og gamle hjemmesider, bl.a. fordi de tilhørende tags er fjernet i HTML 5. Men indlejringer bruger vi i stor stil, og til det har vi de tre tags OBJECT, EMBED og IFRAME. De kan omtrent det samme, men man skal være opmærksom på at de tre tags har forskelle i de indbyggede funktionaliteter, der kan gøre en af dem mere hensigtsmæssig end de andre, når man koder. Generelt er det sådan, at IFRAME er den pt. mest populære og EMBED påstås at være under afvikling. De tre tags kan også håndtere video, men her er det generelt bedre at bruge VIDEO-tag'en, da den er lavet specifikt til formålet. Læs mere om video på hjemmesiden her.

Tag'en IFRAME er yderst simpel. Syntaxen for at få den til at fungere er:



Bemærk, at selv om der er en start- og en slut-tag, er der ikke noget i den. Man skal heller ikke at specificere typen, som man kan med EMBED og OBJECT. Man kan godt skrive noget eller indsætte billeder i tag'en, hvis man vil. Så bliver det bare vist under objektet man linker til i SRC-attributten.

Hvis vi prøver at indsætte siden med skaksymboler i en IFRAME der er 680 x 500 px, med automatisk scrollbar (dvs. når der er overflow), og har en sort ramme i bredden 2 px, så ser koden således ud:



På skærmen kommer det til at se således ud:




IFRAME har en række specifikke attributter, hvoraf en stor del er forsvundet som en del af HTML 5. Som det ses af ovenstående eksempel betyder det at de er væk kun at effekten skal laves med attributten STYLE, enten direkte skrevet i tag'en som i eksemplet, eller som CSS.

Attributterne er disse:

Attribut	Værdier	Effekt
ALIGN	left right top middle bottom	Specificerer udslutningen (placeringen) af IFRAME i forhold til sidens andre elementer. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
FRAMEBORDER	1 0	Specificerer om der skal være en ramme om IFRAME eller ej. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
HEIGHT	pixels	Specificerer højden af IFRAME i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
LONGDESC	URL	Specificerer en side som indeholder en længere beskrivelse af indholdet i IFRAME. Understøttes ikke i HTML5. Bemærk: Indholdet af filen der linkes til vises ikke noget sted i IFRAME.
MARGINHEIGHT	pixels	Specificerer top- og bundmargin på indholdet i IFRAME. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
MARGINWIDTH	pixels	Specificerer højre- og venstremargin på indholdet i IFRAME. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
NAME	navn	Specificerer et navn til IFRAME
SANDBOX	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Muliggør et ekstra sæt restriktioner på indholdet i IFRAME. Kun HTML 5.
SCROLLING	yes no auto	Specificerer om der skal vises scrollbars eller ej i IFRAME. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
SRC	URL	Specificerer adressen for den indlejrede fil i IFRAME.
SRCDOC	HTML_code	Specificerer HTML-kode som skal afvikles i IFRAME. Kun HTML 5. Bemærk: Indholdet der genereres i SRCDOC gør et evt. indhold specificeret med SRC usynligt.
WIDTH	pixel	Specificerer vidden af IFRAME i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.

EMBED kan grundliggende det samme som IFRAME, bare med færre attributter. Formelt er EMBED en HTML 5 tag, men den vil på flere browsere fungere under HTML 4.01, hvis man bruger dette. Den kan blot ikke valideres. Som altid anbefales det, at man bruger HTML 5 til siderne.

Syntaxen for at få EMBED til at fungere er



dvs. der er ikke nogen slut-tag. Hvis vi prøver at indsætte siden med skaksymboler i en EMBED analogt til IFRAME ovenfor, dvs. 680 x 500 px, med automatisk scrollbar (dvs. når der er overflow), og har en sort ramme i bredden 2 px, så ser koden således ud:



På skærmen kommer det til at se således ud:




Attributterne er disse:

Attribut	Værdier	Effekt
HEIGHT	pixels	Specificerer højden af EMBED i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
SRC	URL	Specificerer adressen for den indlejrede fil i EMBED.
TYPE	media_type	Specificerer typen af embedded fil f.eks. TYPE="application/vnd.adobe.flash-movie" hvis det er en Flash-fil. Det lader ikke til, at denne attribut er nødvendig at specificere for de gængse filtyper.
WIDTH	pixel	Specificerer vidden af EMBED i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.

Som det ses af ovenstående eksempel kan man uden problemer lave de man ønsker med attributten STYLE, enten direkte skrevet i tag'en som i eksemplet, eller som CSS.

Tag'en OBJECT er er af ældre dato end IFRAME og EMBED og fungerer også under HTML 4.01. Syntaxen for at få den til at fungere er:



Bemærk, at der her bruges attributten DATA i stedet for SRC som ellers er attributten man bruger til filen/adressen der peges på. Bemærk ligeledes, at selv om der er en start- og en slut-tag, er der ikke noget i den. Man kan godt skrive noget eller indsætte billeder i tag'en, hvis man vil. Så bliver det bare vist under objektet man linker til i DATA-attributten.

Hvis vi prøver at indsætte siden med skaksymboler fra før i en OBJECT, der er 680 x 500 px, med automatisk scrollbar (dvs. når der er overflow), og har en sort ramme i bredden 2 px, så ser koden således ud:



På skærmen kommer det til at se således ud:




OBJECT har en række specifikke attributter, hvoraf en stor del er forsvundet som en del af HTML 5. Som det ses af ovenstående eksempel, betyder det at de er væk kun at effekten skal laves med attributten STYLE, enten direkte skrevet i tag'en som i eksemplet, eller som CSS.

Attributterne er disse:

Attribut	Værdier	Effekt
ALIGN	left right top middle bottom	Specificerer udslutningen (placeringen) af OBJECT i forhold til sidens andre elementer. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
ARCHIVE	URL	Link til filer der skal loades samtidig med objektet for at det fungerer korrekt. Understøttes ikke af HTML 5.
BORDER	pixel	Specificerer om der skal være en ramme om OBJECT eller ej ved at specificere en bredde i px. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
CLASSID	class_ID	Referencenummer som OBJECT skal bruge til at håndtere indholdet korrekt. Enten en reference til Windows Registry eller et link. Understøttes ikke af HTML 5.
CODEBASE	URL	Link til hvor man kan finde code base til CLASSID. Understøttes ikke i HTML5.
CODETYPE	URL	Specificerer typen af den indlejrede fil, f.eks. en Word-fil: CODETYPE="application/msword" eller en Flash-animation: CODETYPE="application/x-shockwave-flash". Dette er lidt forskelligt fra TYPE, som specificerer typen af indlejret objekt. Understøttes ikke i HTML 5.
DATA	URL	Specificerer adressen for den indlejrede fil i OBJECT.
DECLARE	declare	Specificerer at et objekt kun skal deklareres, men ikke dannet eller påbegyndt før der er brug for det. Understøttes ikke i HTML 5.
FORM	form_id	Specificerer ID på forms, som objektet måtte referere til. Ny i HTML 5.
HEIGHT	pixels	Specificerer højden af OBJECT i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
HSPACE	pixels	Specificerer whitespace/padding til højre og venstre for objektet. Understøttes ikke i HTML 5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
NAME	navn	Specificerer et navn til OBJECT
STANDBY	text	Specificerer en tekst der skal vises mens objektet loader. Understøttes ikke i HTML 5.
TYPE	media_type	Specificerer typen af embedded objekt f.eks. TYPE="application/vnd.adobe.flash-movie" hvis det er en Flash-fil. Det lader ikke til, at denne attribut er nødvendig at specificere for de gængse filtyper.
USEMAP	#mapname	Specificerer ID på kort lavet med MAP-tag'en, hvis man har en sådan. Fungerer ikke med alle browsere.
VSPACE	pixels	Specificerer whitespace/padding over og under objektet. Understøttes ikke i HTML 5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
WIDTH	pixel	Specificerer vidden af OBJECT i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.