NinetNet HTML Iframe

Iframe - Inline Floating Frame

Med en iframe kan du skapa en ram på din sida där du sedan kan visa t.ex. en annan webbsida som då integreras som om den vore en del av sidan där iframen skapas.

MEN!
Att använda taggen iframe är inte korrekt om man kodar enligt strict standard. Många textläsare som används av dem med funktionshinder har problem att tolka innehållet i en iframe på ett bra sätt. Vill man att sidan ska vara användarvänlig bör man undvika iframe's.

Kodar du i HTML eller XHTML Transitional är det däremot tillåtet att använda iframe's.

Observera också att en del av de attribut som används med taggen iframe inte heller är korrekta om man kodar enligt strict standard.

Med det sagt... Läs vidare!

Inledning

Grunden Steg för Steg

Bläddringslist / Rullningslist / Scrollbar

Länkning

Osynlig Iframe

Inledning

Med taggen <iframe> kan du skapa en ram på din sida. I den ramen kan du sedan visa innehåll som hämtas någon annanstans ifrån. Det vanligaste är att man i ramen visar en annan html-sida. Man kan också med hjälp av attributet "target" skapa länkar så att man i ramen kan bläddra mellan olika sidor.

Inline frames var från början en finess som bara kunde visas av Internet Explorer men tekniken fungerar numer i de flesta webbläsare. Men tänk på att äldre webbläsare kan ha problem att visa Inline frames.

Så här kan det se ut:

Användning

Vad kan man använda en iframe till?

•Förträffligt finurligt när du vill ha in mycket information på litet utrymme.

•Information som uppdateras ofta kan skrivas på en separat html-sida som sedan laddas in i en iframe på obegränsat antal sidor. På så sätt behöver du bara ändra på ett ställe - men informationen blir densamma på alla sidor.

•Sidan som laddas in kan formateras med css och konstrueras så att den får helt eget utseende och unika egenskaper.

•Du kan skapa länkar och bläddra mellan olika sidor i iframen.

Till Toppen

Grunden Steg för Steg

Hur ska man göra nu då? Vi tar det bit för bit och steg för steg!

Infoga en IFRAME

En iframe infogas på html-sidan med taggen <iframe> och </iframe> Både start och slut-tagg, alltså!

För att något ska visas i iframen måste sökvägen anges med attributet: src i starttaggen. Här infogas en html-sida som heter sida.html:


<iframe src="sida.html"></iframe>

Blir så här:

Om sida.html är placerad i en speciell mapp måste man förstås skriva in även mappnamnet. HELA sökvägen alltså:


<iframe src="mapp/sida.html"></iframe>

Ramens storlek

Du kan ange precis hur stor iframen ska vara med attributen width och height. Mäts i pixlar eller procent.


<iframe src="sida.html" width="400" height="150"></iframe>

Blir så här:

Marginal

I exemplen ovan styrs marginalen - det vill säga utrymmet mellan ramen och innehållet i iframen av vad som angetts på sidan som laddas in i ramen.

Alltså!
Om du inte anger någon marginal på sidan som laddas in kommer sidan att visas med de marginaler som är standard för webbläsaren. Tänk på att dessa kan variera lite mellan olika webbläsare!

Vill du förändra marginalerna är det bästa sättet att använda CSS på den sida som laddas in i ramen.

Ramens Namn

Om du med hjälp av länkar vill kunna bläddra mellan olika sidor i din iframe måste du ge ramen ett namn. Det är viktigt att du väljer ett unikt namn för att det ska fungera om du har fler iframe-ramar på din sida!

Så här skriver du in namnet "iframe1":


<iframe name="iframe1" src="sida.html" ></iframe>

Osynlig Ramkant

Med attributet frameborder kan du ange att du vill att kanten på din iframe ska vara osynlig. Då ska värdet anges till "0".

Koden:


<iframe src="sida.html" width="400" height="150" frameborder="0"></iframe>

Blir så här:

För säkerhets skull kan det vara klokt att ange värdet till "1" om du vill HA en kant för att alla webbläsare ska visa den. Undantaget är: "Opera" - som aldrig visar kanter på en iframe. Observera också att utseendet på kanten varierar mellan olika webläsare!

Noframes

Eftersom det finns en del webläsare som av olika anledning inte visar iframes är det viktigt att skriva ett meddelande till dem mellan <iframe> och </iframe>. Här är det smart att ta med en vanlig länk till sidan som ska laddas in i ramen.

Så här skulle det kunna se ut:


<iframe src="sida.html">Din webläsare kan inte visa IFRAME'S, men här är <a href="sida.html">en länk till sida.html</a>!</iframe>

Till Toppen

Bläddringslist - Rullningslister - Scrollbar

Med attributet scrolling kan du ange hur du vill att bläddringslisterna i din iframe ska visas.

"auto" - visar bläddringslist vid behov
"yes" - visar alltid bläddringslist
"no" - visar aldrig bläddringslist

Skriver man så här i koden:


<iframe src="sida.html" width="400" height="150" frameborder="0" scrolling="no"></iframe>

Blir det så här:

OBS!
Med alternativet scrolling="no" kommer det INTE att visas någon bläddringslist även om du klantat till det och innehållet på sidan tar större plats än ramen. Därför är kanske scrolling="auto" i de flesta fall ett bättre alternativ. Tänk på att marginaler, teckensnitt och radavstånd kan variera mellan olika webbläsare...

Anger du inte attributet "scrolling" ALLS visas bläddringslisten vid behov. MEN! Det kommer att fungera lite olika i olika webläsare. Så för att vara säker på att det ska fungera som du vill är det ändå bra att ange någon av attributen för scrolling. Läs vidare!

Bläddringslister - Felsökning

Eftersom Iframe är en relativt ny företeelse på nätet visas det lite olika i olika webläsare. Det kan bli problem med att horisontal bläddringslist dyker upp fast den egentligen inte behövs - om du har en korrekt DOCTYPE på sidan. Problemet uppstår främst i Internet Explorer.

Vill du inte ha några bläddringslister ska du ange scrolling="no" och vara säker på att innehållet på sidan inte tar större plats än måtten på din "Iframe". Kolla i Internet Explorer och Mozilla Firefox.

Anger du scrolling="auto" kommer Internet Explorer att visa BÅDE vertikal och horisontal bläddringslist (med korrekt DOCTYPE) om innehållet tar för stor plats - även om det bara är i höjdled.

Det är alltså ofta bättre att ange scrolling="yes". Då visas ALLTID den vertikala listen och horisontal vid behov - på samma sätt i "alla" webläsare.

Bläddringslistens utseende

Vill du själv bestämma hur bläddringslisten i din iframe ska se ut måste du använda css på den sida som laddas in i ramen.

Men observera att det inte är korrekt att stajla bläddringslister om man kodar enligt strict standard. Den här funktionen stöds dessutom än så länge bara av Internet Explorer och lite halvdant av Opera från version 8.

Koden:


<iframe src="sida.html" width="400" height="150" scrolling="yes"></iframe>

Med följande css-mall på sida.html:


<html>

<head>

<style type="text/css">

<!--

html, body { scrollbar-base-color: #E6E6FA }

-->

</style>

</head>

<body>:::</body>

</html>

Blir så här:

Ser du inte någon skillnad? Då stöder inte din webläsare den här funktionen...

Det går lika bra att använda en extern stilmall. Läs mer om hur man infogar CSS under rubriken: CSS / Hur infogas CSS?

Läs mer om hur man byter färg på bläddringslister här:
CSS / CSS - Finesser.

Till Toppen

Länkning

Genom att ge iframen ett namn och använda attributet target i länktaggen <a> kan du bläddra mellan olika sidor i iframen.

Läs mer om länkning under rubriken: HTML / Länkar. Klicka här!

Så här kan koden för en sådan länk se ut:


<a href="sida.html" target="iframe1">

Länk till Iframe 1</a>

Följande kod:


<p><a href="gul.html" target="iframe1">

LÄNK TILL GUL SIDA</a>

&nbsp;&nbsp;&nbsp;

<a href="bla.html" target="iframe1">

LÄNK TILL BLÅ SIDA</a></p>

<iframe name="iframe1" src="bla.html" width="260" height="100"></iframe>

Blir så här:

LÄNK TILL GUL SIDA LÄNK TILL BLÅ SIDA

Länka till olika IFRAME's

Genom att placera fler iframe-ramar på din sida och ge dem olika namn kan du länka in olika sidor i olika ramar.

Följande kod:


<p><a href="gul.html" target="iframe2">GUL SIDA</a>

&nbsp;&nbsp;&nbsp;

<a href="bla.html" target="iframe2">BLÅ SIDA</a>

&nbsp;&nbsp;&nbsp;

<a href="rod.html" target="iframe3">RÖD SIDA</a>

&nbsp;&nbsp;&nbsp;

<a href="gron.html" target="iframe3">GRÖN SIDA</a></p>

<iframe name="iframe2" src="iframe/bla.html" width="130" height="100"></iframe>

&nbsp;&nbsp;&nbsp;

<iframe name="iframe3" src="iframe/gron.html" width="130" height="100"></iframe>

Blir så här:

GUL SIDA BLÅ SIDA RÖD SIDA GRÖN SIDA

Till Toppen

Osynlig Iframe

Du kanske vill att dina besökare inte ska märka av din iframe - att den ska smälta in med det övriga innehållet utan att synas?

Om du har en vanlig färg som bakrund är det inte alls svårt. Det enda du behöver göra är att ha samma bakgrundsfärg på sidan med din iframe och sidan som laddas in.

Du måste förstås också ange att ramkanten inte ska visas (se ovan) och välja alternativet scrolling="no" för att inte bläddringslister ska visas - eller för säkerhets skull kanske "auto"...

Innehållet får inte heller ta större plats än ramen, förstås. Annars kommer dina besökare se en bläddringslist om du valt "auto" eller missa delar av sidan om du valt "no"...

Så här skulle det kunna se ut med svart bakgrundsfärg både på sidan med iframen och sidan som laddas in i ramen:

Så här skulle det se ut MED ramkant:

Transparent

Om du vill ha en "osynlig" iframe på en sida där du har en bakgrundsbild blir det lite knepigare. Men bara lite! Du gör helt enkelt bakgrunden på sidan som laddas in transparent (genomskinlig).

Tre saker måste göras för att detta ska fungera:

•För det första måste man ha samma bakgrundsbild på de båda sidorna!

•För det andra måste attributet allowtransparency="true" finnas med i startaggen <iframe>.

•För det tredje måste attributet style="background-color: transparent" finnas med i startaggen <body> på den sida som laddas in i ramen.

Transparens fungerar i nyare versioner av Internet Explorer och Mozilla men inte i Netscape eller Opera - men det kanske kommer...

Så här kan koden se ut:


<html>

<head>...</head>

<body>

<iframe src="sida.html" width="300" height="100" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>

</body>

</html>

Och med följande body-tagg på sida.html...


<body style="background-color: transparent">:::</body>

...kan det bli så här...

...och så här MED ramkant!

Hur man anger bakgrundsfärg och bakgrundsbild med CSS kan du läsa mer om under rubriken: CSS / Grrunder I.

Till Toppen

Ramar - Frames

Formulär