Introduktion till JavaScript
Del 3



Många har frågat hur JavaScript och frames fungerar ihop. För att använda frames tillsammans med JavaScript måste man ha Netscape Navigator 2.0. Det finns några läsare som stöder frames nu, men de stöder vanligtvis inte JavaScript. Jag tror inte att det dröjer länge innan det finns fler läsare som stöder både frames och JavaScript.
Först ska jag tala lite om frames. Många HTML-dokumentationer innehåller ingen information om frames därför att frames är så nytt. Med frames kan man 'dela' skärmen i flera fönster och visa olika HTML-dokument i de olika fönstren. En trevlig sak är att fönstren kan samverka. Det betyder att de kan utbyta information med varandra. Du kan till exempel skapa ett dokument med 2 fönster. Ett med din vanliga HTML-sida och ett med ett verktygsfält. Verktygsfältet kan innehålla knappar för att hoppa i din vanliga HTML-sida. Verktygsfältet kommer alltid att vara synligt. Även när ett annat HTML-dokument öppnas i det andra fönstret. Jag ska börja med att visa hur det här ser ut. Tryck på knappen så får du se hur frames ser ut. (Om du tittar på den här sidan online tar det ett ögonblick när du trycker på knapparna, i den här delen av kursen, eftersom scripten ska läsas från servern)

Här är HTML-koden för frames: 

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frtest1.htm" name="fr1"> 
    <FRAME SRC="frtest2.htm" name="fr2"> 
  </FRAMESET> 
</HTML>

Först talar man om hur många frames man vill ha. Det definieras i <frameset...>-koden. Genom att skriva rows kommer läsaren att dela upp ytan i rader. Man kan skapa kolumner i stället genom att skriva cols i stället för rows. Det går att använda flera <frameset...>-koder också. Här är ett exempel från Netscape: 

<FRAMESET COLS="50%,50%"> 
  <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
  <FRAMESET ROWS="33%,33%,33%"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
    <FRAME SRC="cell.html"> 
  </FRAMESET> 
</FRAMESET>

Detta skapar två kolumner och den andra kolumnen delas upp i tre lika stora delar. 50%,50% i första <frameset>-koden talar om för läsaren hur stora fönstren ska vara.
Man kan döpa fönstren. Detta är viktigt om man ska använda JavaScript. I det första exemplet ovan kan du se hur man döper fönstren. I <frame>-koden talar man om vilken HTML-sida som ska öppnas.


Jag tycker att grunderna för frames är lätta att förstå. Ta nu en titt på vårt nästa exempel:

Detta kommer att öppna ett skärmfönster där man kan klicka på lite knappar i det ena fönstret och därigenom skriva något i det andra fönstret.
Här är koden:

För att skapa frame-sidan behöver man (frames.htm): 

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET ROWS="50%,50%"> 
    <FRAME SRC="frame1.htm" name="fr1" noresize> 
    <FRAME SRC="frame2.htm" name="fr2"> 
  </FRAMESET> 
</HTML>

Här är koden för frame1.htm: 

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
     function hi() {
       document.write("Hi!<br>");
     }
     function yo() {
       document.write("Yo!<br>");
     }
     function bla() {
       document.write("bla bla bla<br>");
     }
// -->
</script>
</HEAD>
<BODY>
This is our first frame!
</BODY>
</HTML>

And now frame2.htm: 

<HTML>
<body>
This is our second frame!
<p>
<FORM NAME="buttonbar">
     <INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">
     <INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">
     <INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>

Wow! Dokumenten blir längre och längre! Vad händer här? Användaren öppnar den första filen (frames.htm). Detta skapar frame-sidan och öppnar frame1.htm i första fönstret (döpt till 'fr1') och frame2.htm i det andra fönstret (döpt till 'fr2'). Så långt är det vanlig HTML. Som du ser innehåller frame1.htm några JavaScript-funktioner, men de anropas inte i det dokumentet. Behövs då inte funktionerna? Är jag bara för lat för att radera dem? Även om jag är en lat typ behövs funktionerna faktiskt. De anropas av det andra dokumentet, frame2.htm! Vi skapar några knappar i det andra dokumentet på samma sätt som vi gjorde i del 1 av den här introduktionen. Egenskapen onClick är också bekant, men vad betyder parent.fr1...?

Om du är bekant med objekt är detta ingen nyhet för dig. Som du såg anropas frame1.htm och frame2.htm av filen frames.htm. Dokumentet frames.htm kallas för förälder (parent) till de två fönstren. Alltså kallas de två fönstren för barn (child) till dokumentet frames.htm. Man kan se det som en hierarki som ger ett visst inbördes förhållande mellan de olika fönstren. Jag ska försöka förklara tanken med hjälp av lite 'grafik' (ASCII-konst är en bättre beskrivning...): 

              frames.htm                parent
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   children

Detta kan naturligtvis utökas. Man kan skapa några 'barnbarn' (grandchildren) (om du vill kalla det för det. Det är inte det officiella uttrycket!). Så här ser det ut: 

              frames.htm                parent
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   children
          /  \
         /    \
        /      \
    gchild1  gchild2                    'grandchildren'

Om du vill anropa någonting i föräldrafönstret, från frame2.htm, sätter du helt enkelt parent. före funktionen du anropar. Det går att anropa funktionerna vi definierade i frame1.htm från föräldra-dokumentet genom att sätta fr1 före funktions-anropet. Varför fr1? I koden till föräldra-dokumentet (frames.htm) skapade du flera fönster och döpte dem. Jag valde fr1 för det första fönstret. Nästa steg är enkelt. Hur anropar man det första fönstret från frame2.htm (som ligger i det andra fönstret, kallat fr2)? Som du kan se i min fantastiska grafik finns det inte någon direkt relation mellan frame1.htm och frame2.htm. Man kan inte direkt anropa funktioner från frame2.htm som har definierats i frame1.htm. Man måste anropa den via föräldra-dokumentet. Alltså parent.fr1. Om du vill anropa funktionen hi() från frame2.htm skriver du parent.fr1.hi(). Det är det som sker i det andra dokumentet i egenskapen onClick.

Om du har en sida med frames och någon klickar på en länk kommer frame-sidan att vara kvar. Det är ok om användaren stannar på din sida. Du kan skapa ett verktygsfält som visas i ett fönster hela tiden, men om användaren hoppar till en annan del av Internet ska kanske inte verktygsfältet vara kvar. Hur tar man bort de frames man en gång skapat?

Lägg bara till TARGET="_top" i <a href...>-koden. Det ser ut så här: 

<a href="goaway.html" TARGET="_top">if you don't want to stare at my page anymore</a>

Du måste förstås lägga till TARGET="_top" i alla länkar som leder utanför din sida. Om alla länkar på din sida leder 'ut' kan du också skriva <base target="_top"> i huvudet på din HTML-sida. Det betyder att alla länkar tar bort frame-sidan.


Index - Del 1 - Del 2 - Del 4 - Del 5 - Del 6 - Del 7


Senast ändrad 11 maj 1996
© 1996 Stefan Koch

Översatt till svenska av Niklas Johansson 1996