Uvod v JavaScript

3.del

Ogledali si bomo sodelovanje JavaScripta in okvirjev. Za pravilen prikaz okvirjev potrebujete Netscape Navigator ali pa Internet Explorer 3.0, ki hkrati podpirata tudi JavaScript.
Najprej se bomo seznanili z samimi okvirji. Z uporabo okvirjev lahko okno v brskalniku razdelite na več delov, ki so med seboj neodvisni. V njih lahko tudi naložite posamezne strani. Dobra stran okvirjev je, da lahko sodelujejo - med seboj izmenjujejo informacije. Lahko bi npr. naredili dva okvirja - v enem bi bila vaša prava stran, v drugem pa menu z ikonami. Menu bi bil vedno viden, v drugem okvirju pa bi se nalagale strani, ki bi jih izbrali s klikom na ikone.
Če si želite okvirje ogledati, pritisnite gumb:

Zgornji primer:

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

Najprej z <frameset...> tagom podate brskalniku koliko okvirjev želite. Če napišete rows, boste dobili vrstice, če pa napišete cols boste dobili stolpce. Hkrati lahko uporabite tudi vec <frameset...> tag-ov. Spodaj je primer iz Netscapeove dokumentacije:

<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>

Najprej naredimo dva stolpca. Prvega razdelimo na dva dela - vsak je velik 50%, drugega pa na tri vrstice - 33%. Okvirjem lahko damo tudi imena, da jih bomo lahko pozneje iz JavaScripta klicali. V prvem primeru smo imena nastavili na fr1 in fr2.

Osnove okvirjev smo na hitro preleteli. Oglejmo si naslednji primer:

Odprlo se bo okno, kjer boste s kliki na gumbe lahko spreminjali tekst v drugem okvirju.
Izvorna koda:

Najprej boste rabili frames.html, ki bo naredil okvirje:

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

frame1.html:

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
     function hi() {
       document.write("Zdravo!<br>");
     }
     function yo() {
       document.write("Ziv!<br>");
     }
     function bla() {
       document.write("bla bla bla<br>");
     }
// -->
</script>
</HEAD>
<BODY>
To je naš prvi okvir!
</BODY>
</HTML>

frame2.html:

<HTML>
<body>
To je naš drugi okvir!
<p>
<FORM NAME="Orodjarna">
     <INPUT TYPE="button" VALUE="Zdravo" onClick="parent.fr1.hi()">
     <INPUT TYPE="button" VALUE="Ziv" onClick="parent.fr1.yo()">
     <INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>

Kaj se zgodi? Brskalnik naloži prvi html (frames.html), ki kreira okvirje in odpre frame1.html v prvi okvir (ki ima ime 'fr1') ter frame2.html v drugi okvir ('fr2'). V frame1.html so definirane nekatere funkcije, ki pa jih kličemo iz drugega dokumenta. V drugem dokumentu naredimo skripto in gumbe, ki se navezujejo na funkcije prvega dokumenta. parent.fr1 se navezuje na objektno programiranje. Kot se iz zgornjega primera vidi, frames.html klice frame1.html in frame2.html. frames.html je starš (ang. parent), ostala dva okvirja pa sta otroka. Med okvirji obstaja nekakšna hierarhija. Mogoče boste lažje razumeli s pomočjo spodnje skice:

              frames.html                parent - starš
               /      \
              /        \
             /          \
  fr1(frame1.html)     fr2(frame2.html)   children - otroci

Otroci imajo lahko seveda svoje otroke. Ti so nato vnuki ...

              frames.html                starš
               /      \
              /        \
             /          \
  fr1(frame1.html)     fr2(frame2.html)   otrok
          /  \
         /    \
        /      \
    vnuk1     vnuk2                     vnuk

Če hočete označiti karkoli v osnovnem parent okvirju iz frame2.html, samo vstavite parent pred funkcijo. Za klicanje funkcij iz frame1.html pa morate zato vstaviti še fr1 - parent.fr1.

Če ste naredili nekaj okvirjev in nekdo klikne na link, ki je na njih, se tista stran naloži v okvir. To je pravilno, če je tista stran vaša in če zelite, da se željena stran naloži v okvir. Če pa hoče uporabnik slediti povezavi, ki kaže na neko tretjo stran, bi bilo to nezaželeno. Brskalnik bi za vedno ostal v nekem okvirju! Kako torej izbrisati okvirje?

Enostavno. K vašemu <a href...> tag-u dodajte TARGET="_top". Link nato izgleda takole:

<a href="goaway.html" TARGET="_top">hocem proc od tvojih strani</a>

avtor: Žiga Mahkovec
november, 1998