HTML >iframe

iframe

iframe | Innpakket | Dynamisk | Flyttbart | WXT

Hva

iframe as a gadget ?

frames er ute i HTML5, men iframe har overlevd. Denne modulen innholder ikke spesifikke HTML5-finesser.

Det er interessant å knytte iframe til begrepet gadget, hva det nå måtte være for noe ?

Søk i diverse ordbøker gir blandt annet følgende definisjoner på ordet gadget:

The American Heritage® Dictionary of the English Language: A small specialized mechanical or electronic device; a contrivance
Collins English Dictionary – Complete and Unabridged: A small mechanical device or appliance; Any object that is interesting for its ingenuity or novelty rather than for its practical use
Cambridge Advanced Learner's Dictionary: A small device or machine with a particular purpose

Når ordet brukes i forbindelse med webløsninger er det også ganske upresist. Både Google [1] og Microsoft [2] bruker begrepet 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.

I denne modulen skal vi gå ut med en ganske åpen definisjon og se litt på ulike måter å realisere enkle "frittstående" tjenester innefor rammen av en nettleser. Vi vil interessere oss både for iframes og mer enkle html-fragmenter. De resonnementene vi gjør her kommer i tillegg til det vi vanligvis forbinder med AJAX-løsninger, AJAX , som også kan realisere "selvforsynte øyer" på en vevside.

MERK: Firefox har et problem med iframes: En eller annen cashing strategi fører til at innhold kan havne i feil iframe. Under utviklingsarbeid kan det derfor være lurt å tømme cashen dersom det oppstår noen problemer som kan tyde på at dette er tilfelle.

MERK: Google gadgets er nærmere beskrevet i modulen GoogleGadgets

iframe

Vi begynner med et enkelt eksempel på en ganske unyttig tjeneste, en gadget som viser fram et tilfelding latinsk sitat, med norsk oversettelse. Dette sitatet produseres fra et Pythonskript som ser slik ut:

#! /usr/bin/python2.5
# -*- coding: latin-1 -*-
import random,cgi
import quotes
#import cgitb; cgitb.enable()
#------------------------
# HTML-page
HTML_PAGE="""
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Latin</title>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
    <style>
    .L{font-size:14px;color:red}
    .N{color:gray;font-size:11px}
    </style>
</head>
<body> 
<h2>Dagens latin</h2>
<div>
  <div class="L">%s</div>
  <div class="N">[ %s ]</div>
</div>
</body>
</html>
"""
#--------------------------
print 'Content-type: text/html\n'
form=cgi.FieldStorage()
txt=quotes.verbs[random.randint(0,len(quotes.verbs)-1)][0]
parts=txt.split(';')
print HTML_PAGE%(parts[0],parts[1])

Selve sitatsamlingen er lagret som en dictionary i fila: quotes.py.

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="http://www.it.hiof.no/~borres/cgi-bin/latin/gadlatin.py" 
        width="300" height="120"> 
</iframe>
</div>

Vi kjører altså et eget "browservindu" i browseren.

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.

Innpakket

Vi kan enkelt legge på en menylinje som gjør at vi kan åpne og lukke vår gadget.

HTML-koden ser slik ut:

<div class="wxtgadget" style="width:303px">
<div class="header"> <span class="off" onclick="toggleGadget(this);">_</span>Latinske ordtak</div>
<div class="content" style="display:none">
<iframe height="120" src="http://www.it.hiof.no/~borres/cgi-bin/latin/gadlatin.py" 
       width="300"> 
</iframe>
</div>
</div>

Java scriptet: toggleGadget kan være slik:

function toggleGadget(elt)
{
    contentElt=elt.parentNode.parentNode.getElementsByTagName('div')[1];
    if(elt.getAttribute("class")=="off")
    {
        contentElt.style.display="block";
        elt.setAttribute("class","on");
    }
    else
    {
        contentElt.style.display="none";
        elt.setAttribute("class","off");
    }
}

Dynamisk

Dersom vi ønsker å lage sitatgadgeten slik at den frisker seg opp med jevne mellomrom kan vi endre vevsiden med å legge inn følgende linje i headeren til den siden vi genererer i Pythonscriptet:

<meta http-equiv="refresh" content="15"/>

Alternativt kan vi lage det slik at vi klikker for neste

Eller "innpakket"

Dette er realisert med en enkel div i den HTML-siden som lages:


<div style="cursor:pointer;text-align:right;position:absolute;top:20;left:250">
<a href="http://www.it.hiof.no/~borres/cgi-bin/latin/gadlatin4.py">>></a>
</div>

Python scriptet blir i dette tilfellet slik:

#! /usr/bin/python2.5
# -*- coding: latin-1 -*-
import random,cgi
import quotes
#import cgitb; cgitb.enable()
#------------------------
# HTML-page
HTML_PAGE="""
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Latin</title>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
    <style>
    .L{font-size:14px;color:red}
    .N{color:gray;font-size:11px}
    </style>
</head>
<body> 
<h2>Dagens latin</h2>
<div>
  <div class="L">%s</div>
  <div class="N">[ %s ]</div>
</div>
<div style="cursor:pointer;text-align:right;position:absolute;top:20px;left:250px">
<a href="http://www.it.hiof.no/~borres/cgi-bin/latin/gadlatin4.py">>></a>
</div>
</body>
</html>
"""
#--------------------------
print 'Content-type: text/html\n'
form=cgi.FieldStorage()
txt=quotes.verbs[random.randint(0,len(quotes.verbs)-1)][0]
parts=txt.split(';')
print HTML_PAGE%(parts[0],parts[1])

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

Flyttbart

Vi ønsker i tillegg til å åpne og lukke vinduet, også å gjøre det flyttbart (drag and drop). Dette krever en god del mer javaskripting. Det finnes mange oppskrifter for Dragging i Javascript, men som (nesten alltid) finnes det en grei og rimelig enkel og godt forklart løsning hos Quirksmode [3]

HTML-koden blir slik:

<div id="gadget1" class="wxtgadget" style="width:303;position:absolute">
    <div class="header" style="cursor:move"> 
    <span class="off" onclick="toggleGadget(this)">_</span>Latinske ordtak</div>
    <div class="content" style="display:none">
        <iframe height="120" 
                src="http://www.it.hiof.no/~borres/cgi-bin/latin/gadlatin.py" 
                width="300"> 
        </iframe>
    </div>
</div>
<script type="text/javascript"> dragDrop.initElement('gadget1');</script>

WXT

Det verktøyet, WXT jeg bruker for å lage og vedlikeholde disse vevsidene lager automatisk "gadgets" i form av iframe eller html-segmenter, sammen med standardiserte stiler. Jeg skriver f.eks. følgende:

<_wxt gadget fragmentid="tombola" 
            title="La Vida Tombola"
            movable="yes"
            width="480" height="410"?>

og WXT generer:

<div class="wxtgadget" id="La_Vida_Tombola" 
     style="width: 485; position: absolute; left: 135; top: 3131;">
<div class="header">
    <span class="off" onclick="toggleGadget(this);">_</span>
    La Vida Tombola</div>
<div class="content" style="display: none;">
  <object height="385" width="480">
    <param name="movie" 
           value="http://www.youtube.com/v/ZlSm-wMf2yk&hl=en_US&fs=1&rel=0">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
        <embed allowfullscreen="true" allowscriptaccess="always" 
        src="http://www.youtube.com/v/ZlSm-wMf2yk&hl=en_US&fs=1&rel=0" 
        type="application/x-shockwave-flash" height="385" width="480">
 </object>
 </div>
 <script type="text/javascript">dragDrop.initElement('La_Vida_Tombola');</script>

Youtube

Vi kan også legge inn html-fragmenter som i seg selv viser dynamisk material. Vi kan lage AJAX-løsninger i et fragment (eller en iframe) eller vi kan f.eks. legge inn en video fra YouTube som en gadget. Vi legger inn den koden som YouTube inviterer oss til å "embedde". F.eks. en video av Manu Chao:

Eller et foredrag av Alan Kay:

Applet

Java Applets er en annen komponent vi kan vurdere å ta inn i vårt utvidede gadget-begrep.

Denne appleten er nærmere beskrevet på En 3D-applet

Koden som drar gadgetdynamikken på sidene er slik:

// Toggles the visibilty og an element as in PI expandable
// and prepares for next toggle
function toggleExpand(elt)
{
    contentElt=elt.parentNode.parentNode.getElementsByTagName('div')[1];
    if(elt.className.indexOf("off")!=-1)
    {
        contentElt.style.display="block";
        elt.className="on";
    }
    else
    {
        contentElt.style.display="none";
        elt.className="off";
    }
}

 
// modified from: http://www.quirksmode.org/js/dragdrop.html
var MAX_Z_INDEX=1;
function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}
function removeEventSimple(obj,evt,fn) {
    if (obj.removeEventListener)
        obj.removeEventListener(evt,fn,false);
    else if (obj.detachEvent)
        obj.detachEvent('on'+evt,fn);
}
dragDrop = {
    initialMouseX: undefined,
    initialMouseY: undefined,
    startX: undefined,
    startY: undefined,
    draggedObject: undefined,
    initElement: function (element) {
        if (typeof element == 'string')
            element = document.getElementById(element);
        element.onmousedown = dragDrop.startDragMouse;
    //-------
    if (element.style.zIndex)
    {
        thisIndex=element.style.zIndex;
        if (thisIndex > MAX_Z_INDEX)
            MAX_Z_INDEX=thisIndex;
    }
    //-------
    },
    startDragMouse: function (e) {
        dragDrop.startDrag(this);
        var evt = e || window.event;
        dragDrop.initialMouseX = evt.clientX;
        dragDrop.initialMouseY = evt.clientY;
        addEventSimple(document,'mousemove',dragDrop.dragMouse);
        addEventSimple(document,'mouseup',dragDrop.releaseElement);
        return false;
    },
    startDrag: function (obj) {
        if (dragDrop.draggedObject)
            dragDrop.releaseElement();
        dragDrop.startX = obj.offsetLeft;
        dragDrop.startY = obj.offsetTop;
        dragDrop.draggedObject = obj;
        obj.className += ' dragged';
        dragDrop.draggedObject.style.zIndex=MAX_Z_INDEX+1;
        MAX_Z_INDEX=MAX_Z_INDEX+1;
    },
    dragMouse: function (e) {
        var evt = e || window.event;
        var dX = evt.clientX - dragDrop.initialMouseX;
        var dY = evt.clientY - dragDrop.initialMouseY;
        dragDrop.setPosition(dX,dY);
        return false;
    },
    setPosition: function (dx,dy) {
        dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
        dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
    },
    releaseElement: function() {
        removeEventSimple(document,'mousemove',dragDrop.dragMouse);
        removeEventSimple(document,'mouseup',dragDrop.releaseElement);
        dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
        dragDrop.draggedObject = null;
    }
}

Referanser

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

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

Quirksmode Dragh and drop Peter-Paul Koch Quirksmode.org www.quirksmode.org/js/dragdrop.html 05-07-2010

iframes in javascript Jagadish Chaterjee www.devarticles.com/c/a/JavaScript/Working-with-IFRAME-in-JavaScript/ 14-06-2010

Vedlikehold

B. Stenseth, juni 2012

( Velkommen ) HTML >iframe ( Ting og tang )