Ofte har man som redaktør et behov for å legge inn noe som heter en iframe. Det kan være for å vise fram en youtube-video, for å legge inn en visning av facebooksiden din eller av en annen grunn ønsker å dele innhold fra en annen nettside på din egen. 

Hva er en iframe? 

En iframe brukes for å vise fram innhold fra en ekstern side. Det vil si en annen nettside enn din egen. Den lager et vindu til innhold andre har laget og lagt ut.  

Dette vinduet lages med html-kode som limes inn i sin helhet. Hvordan dette gjøres kan du lese om lenger ned i denne artikkelen. Iframen bygges opp med en start <iframe> og en slutt </iframe>. Videre legges det til link til nettsiden du vil vise frem og høyde og bredde på iframen. 

Hvorfor bruke iframe? 

Hvorfor vi fortsatt bruker iframes er usikkert for mange. For utviklere kan det nemlig være en stor fiende. For hele ni år siden ble dette allerede spurt om på den kjente kode-nettsiden "Stackoverflow":  

"For me iframes are pure evil (well, maybe not so pure). They seems to make a lot of troubles. Yes, your whole site will load once and then you can just load a single pages." 

Iframes kan være vanskelig å legge inn, du har ikke kontroll over innholdet i iframen og linkene som blir brukt kan forandre seg når nettsiden du linker fra endrer domene eller innholdstruktur. Så hvorfor bruker vi det fortsatt den dag i dag? 

Her er noen enkle grunner:  

  • Du kan bruke funksjonalitet fra eksterne nettsider, som videospillere. 
  • Du slipper å bruke egen databaseplass på innhold som alt eksisterer et annet sted. 
  • Du trenger ikke bruke tid på å integrere et eksternt API for å lage noe som finnes tilsvarende et annet sted. 

Hvordan bruker du iframes? 

Som nevnt tidligere bygges en iframe opp av en start <iframe> og en slutt </iframe>. Inne i starten kan det settes noe som heter attributter. Attributter er ord som beskriver og knyttes opp til iframen. Attributter gjør at du kan definere høyde, bredde og bestemme hvor iframen skal hente innhold fra, altså en kilde. Det finnes 10 ulike attributter, men vi skal ikke gå nærmere inn på dem nå, vi skal bare ta for oss de viktigste.  

Slik ser en iframe ut med høyde, bredde og kilde:  

<iframe height="300" width="100%" src="aplia.no"></iframe> 

Denne iframen vil vises som 300 piksler høy, fylle ut 100% av tildelt bredde og vise fram aplia.no. Når en iframe har 100% på width vil den skalere etter bredden på skjermen. At den tar 100% av tildelt bredde vil si at den vil være like bred som innholdet den ligger i. Dersom du legger inn en iframe i en tekst vil den derfor bli like bred som teksten.  

Eksempel: Youtubevideo i eZ Publish 

1. Klikk på arkikonet i tekstmenyen 

Legg til ordrett tekst ved å klikke på ikonet

 

2. Når vinduet for Literal tags kommer, velger du klasse HTML og trykker OK.  

Velg klasse: HTML

 

3. Du vil da få opp et grått felt som du limer inn HTML-koden i.  

Illustrasjon av stort, grått felt

 

4. Gå til Youtube og søk etter ønsket video. Trykk på “Del”-knappen under videoen. 

Trykk på del-knappen på youtube

 

5. Trykk deretter på ikonet for “Bygg inn”. 

Trykk på "Bygg inn"

 

6. Endre tallet bak “width” til 100%. (På denne måten vil bredden på Youtube-videoen tilpasse seg etter nettsiden). 

Endre verdien bak "width" til 100%

Les mer

Ventus, Dan Beam, Gertas. 2010. Why do people still use iframes? (22. mai 2020)