HTML-Hajen

Sider og elementer med OBJECT, EMBED og IFRAME









Hvad går det ud på?

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.


Brug af IFRAME

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

<IFRAME SRC="filnavn"></IFRAME>


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:

<IFRAME SRC="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></IFRAME>


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:

AttributVærdierEffekt
ALIGNleft
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.
FRAMEBORDER1
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.
HEIGHTpixelsSpecificerer højden af IFRAME i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
LONGDESCURLSpecificerer 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.
MARGINHEIGHTpixelsSpecificerer top- og bundmargin på indholdet i IFRAME. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
MARGINWIDTHpixelsSpecificerer højre- og venstremargin på indholdet i IFRAME. Understøttes ikke i HTML5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
NAMEnavnSpecificerer et navn til IFRAME
SANDBOXallow-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.
SCROLLINGyes
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.
SRCURLSpecificerer adressen for den indlejrede fil i IFRAME.
SRCDOCHTML_codeSpecificerer 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.
WIDTHpixelSpecificerer vidden af IFRAME i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.



Brug af EMBED

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

<EMBED SRC="filnavn">


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:

<EMBED SRC="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000">


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




Attributterne er disse:

AttributVærdierEffekt
HEIGHTpixelsSpecificerer højden af EMBED i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
SRCURLSpecificerer adressen for den indlejrede fil i EMBED.
TYPEmedia_typeSpecificerer 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.
WIDTHpixelSpecificerer 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.


Brug af OBJECT

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:

<OBJECT DATA="filnavn"></OBJECT>


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:

<OBJECT DATA="Chess.htm" STYLE="width:680px; height:500px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></OBJECT>


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:

AttributVærdierEffekt
ALIGNleft
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.
ARCHIVEURLLink til filer der skal loades samtidig med objektet for at det fungerer korrekt. Understøttes ikke af HTML 5.
BORDERpixelSpecificerer 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.
CLASSIDclass_IDReferencenummer 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.
CODEBASEURLLink til hvor man kan finde code base til CLASSID. Understøttes ikke i HTML5.
CODETYPEURLSpecificerer 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.
DATAURLSpecificerer adressen for den indlejrede fil i OBJECT.
DECLAREdeclareSpecificerer 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.
FORMform_idSpecificerer ID på forms, som objektet måtte referere til. Ny i HTML 5.
HEIGHTpixelsSpecificerer højden af OBJECT i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
HSPACEpixelsSpecificerer 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.
NAMEnavnSpecificerer et navn til OBJECT
STANDBYtextSpecificerer en tekst der skal vises mens objektet loader. Understøttes ikke i HTML 5.
TYPEmedia_typeSpecificerer 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#mapnameSpecificerer ID på kort lavet med MAP-tag'en, hvis man har en sådan. Fungerer ikke med alle browsere.
VSPACEpixelsSpecificerer whitespace/padding over og under objektet. Understøttes ikke i HTML 5. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.
WIDTHpixelSpecificerer vidden af OBJECT i px. Effekten kan laves med STYLE, hvilket under alle omstændigheder anbefales.