iframe

Hva

frames er ute i HTML5, men iframe har overlevd. En iframe er kort sagt et vindu med en egen HTML-kildekode, plassert på en webside, eller om du vil en webisde på en webside.

Denne plasserte websiden lever sitt eget liv og vi kommuniserer normalt ikke mellom denne og websiden som inneholder den.

Du vil se at det er en del leverandører av slike iframe-løsninger som omtaler dem som gadget eller widget. Disse begrepene brukes ikke særlig konsekvent. Både Google [1] og Microsoft [2] bruker begrepet gadget om små webtjenester de leverer som kan plasseres innenfor rammen av en webleser eller på skrivebordet. Definisjonene, rent teknisk, skiller seg fra hverandre, men hensikten er den samme. Du kan jo sjekke dem på Wikipedia og se om du blir noe klokere.

I denne modulen skal vi gannske kort se på noen iframes av litt forskjellig type, og hensikt.

Latin

Vi begynner med et enkelt eksempel på en ganske unyttig hjemmelaget tjeneste, en gadget som viser fram et tilfelding latinsk sitat, med norsk oversettelse.

Selve sitatsamlingen er lagret som JSON i fila: ordtak.json.

Vi starter med å se på iframe som en mekanisme for å inkapsle en egen frame på websiden som kan vise fram et "eget vindu".

HTML-koden ser slik ut:

<div>
<iframe src="frame1.html" 
        width="300" height="120"> 
</iframe>
</div>

Vi kjører altså et eget "browservindu" i browseren. Som du ser er iframe-elementet minimalistisk, og stort nok. Vi har mulighet for å spesifisere flere egenskaper enn width og height:

sandbox
- allow-same-origin: tillater samme kildekode som siden den er plassert på
- allow-top-navigation: tillater at iframe kan hente innhold fra samme kildekode som siden den er plassert på
- allow-forms: tillater å fylle ut og sende forms fra iframe
- allow-scripts: tillater å kjøre script
seamless iframe skal se ut som en del av siden den er på (ingen scrollbars, ingen border)

Websiden som kjører i iframe er i sin helhet slik:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>    
    <title>latin</title>
    <script type="text/javascript" src="https://borres.hiof.no/resources/jslibs/jQ/jquery-min.js"> </script>
    <script type="text/javascript" src="frame1.js"> </script>
    <style>
    #L{font-size:14px;color:red}
    #N{color:gray;font-size:11px}
    </style>
</head>
<body>
<h2>Dagens latin</h2>
<div id="all">
  <div id="L"></div>
  <div id="N"></div>
</div>
<script>loadQuotes()</script>
</body>
</html>

og det involverte javascriptet er slik:

var quotes;
function loadQuotes(){
   $.ajax({
        url:'ordtak.json',//https://borres.hiof.no/wep/data/latin/ordtak.json         
        success:function(data)
        {
            // get the JSON-list
            quotes=data.quotes;
            //when debugging:console.log(quotes[1].L);
            setRandomQuote()
        },
        error:function(data)
        {
            // we failed , tell it
            var elt=document.getElementById("all");
            elt.innerHTML="Fikk ikke tak i data";
        }
        });    
}
function setRandomQuote(){
    var index=Math.floor((Math.random() * quotes.length))
    document.getElementById("L").innerHTML=quotes[index].L;
    document.getElementById("N").innerHTML=quotes[index].N;
}

Vi skal gjøre tre ting med denne løsningen for å få den, om ikke mer nyttig, så i hvert fall mer "gadgety". Først skal vi pakke vinduet inn slik at vi kan åpne og lukke det. Deretter skal vi la vinduet generere nye sitater, når vi ønsker det, og med jevne mellomrom. Til sist skal vi gjøre vinduet flyttbart.

Dynamisk

Dersom vi ønsker å lage sitatgadgeten slik at den frisker seg opp med jevne mellomrom kan vi endre vevsiden med å endre metoden setRandomQuote():

function setRandomQuote(){
	setTimeout(setRandomQuote,4000);
	var index=Math.floor((Math.random() * quotes.length))
	document.getElementById("L").innerHTML=quotes[index].L;
	document.getElementById("N").innerHTML=quotes[index].N;
}

vi legger dessuten til seamless i iframe-elementet og vi får følgende løsning:

(ikke alle nettlesere bryr seg om seamless)

Alternativt kan vi lage det slik at vi klikker for neste

Instruksjon

Et annet eksempel som ikke bruker noe skript på tjeneren, men som bare legger ut HTML-sider kan være slik, (Å konstruere trekant):

geocapture

TED

TED.com [3] har en imponerende liste foredrag, og vi har lov til både å laste ned foredragene og kople oss til med iframe. Her er et eksempel

tedcapture

Soccerway

Dette er et eksempel på hvordan en tjenesteleverandør kan bruke iframe som markedsføring. Soccerway [4] kaller forøvrig disse to widgets.

soccercapture1

soccercapture2

Referanser

Google Gadgets Google developers.google.com/gadgets/ 14-08-2012

Windows Desktop Gadgets Wikipedia en.wikipedia.org/wiki/Windows_Desktop_Gadgets 14-06-2010

TED, Ideas worth spreading www.ted.com/ 14-03-2014

Soccerway, fotballresultater fra hele verden soccerway.com www.soccerway.com/ 14-03-2014