Voodoo's Intro to JavaScript

VOODOO'S INTRODUCTION TO JAVASCRIPT
© 1996, 1997 by Stefan Koch © 1998 Romanian translation by Calin Nicolae

Partea a 3-a: Frame (ferestre cadru)

Crearea de Ferestre cadru (Frames)

O intrebare pusa de multe ori este cum interactioneaza frame-urile si JavaScript. Mai intai trebuie sa explicam ce sunt frame-urile la ce pot fi folosite. Fereastra browserului poate fi impartita in mai multe frame-uri. Aceasta inseamna ca un frame este o parte din suprafata ferestrei browserului. Fiecare frame prezinta in interior un document propriu (de cele mai multe ori document HTML). De exemplu puteti creea doua frame-uri. In primul frame puteti incarca pagina de deschidere a siteului Netscape iar in cea de a doua pagina de deschidere a siteului Microsoft.
Desi crearea de frameuri este o problema HTML vreau sa descriu cateva lucruri de baza. Pentru crearea de frameuri se folosesc doua taguri: <frameset> si <frame>. O pagina HTML care creaza doua frameuri poate arata astfel:

<html>
<frameset rows="50%,50%"> 
  <frame src="page1.htm" name="frame1"> 
  <frame src="page2.htm" name="frame2"> 
</frameset> 
</html>

Aceasta secventa de cod poate produce doua frameuri. Puteti vedea ca folosim proprietatile de rows in tagul <frameset>. Aceasta inseamna ca doua frameuri stau una deasupra celeilalte. Frame-ul de sus incarca pagina HTML page1.htm iar frameul de jos prezinta documentul page2.htm. Daca apasati butonul puteti vedea cum arata rezultatul:

Daca vreti sa aveti coloane in loc de randuri trebuie sa scrieti cols in loc de rows inauntrul <frameset> tag. Partea "50%,50%" specifica cat de mari sunt cele doua ferestre. Puteti de asemenea sa scrieti "50%,*"daca nu doriti sa calculati cat de larga este cea de-a doua fereastra pentru a ajunge la 100%. Puteti specifica dimensiunea in pixeli omitand simbolul %.
Fiecare frame are un nume unic specificat cu ajutorul proprietatii name in tagul <frame> tag. Aceasta ne va ajuta pentru a accesa frame-urile cu ajutorul JavaScript.

Am gasit acest exemplu in docmentatia oferita de Netscape (am modificat-o un pic):

<frameset cols="50%,50%"> 
  <frameset rows="50%,50%"> 
    <frame src="cell.htm"> 
    <frame src="cell.htm"> 
  </frameset> 
  <frameset rows="33%,33%,33%"> 
    <frame src="cell.htm"> 
    <frame src="cell.htm"> 
    <frame src="cell.htm"> 
  </frameset> 
</frameset>

Aruncati o privire pe acest exemplu:

Puteti fixa dimensiunile marginii prin intermediul proprietatii border in tagul <frameset>. border=0 inseamna ca nu doriti sa aveti margine la frame (nu functioneaza cu Netscape 2.x).

Frame-urile si JavaScript

Acum putem sa ne dam seama cum vede JavaScript frame-urile intr-o fereastra a browserului. Pentru aceasta vom creea 2 frame-uri asa cum este aratat in primul exemplu.
Am vazut ca JavaScript organizeaza toate elementele de pe o pagina intr-o ierarhie. Aceasta se pastreaza si pentru frame-uri. Urmatoarea imagine arata ierarhia primului exemplu:

In varful iererhiei este fereastra browser. Aceasta fereastra este impartita in doua frame-uri. Aceasta fereastra este "parinte" in aceasta ierarhie iar cele doua frameuri sunt "copii". Putem sa dam celor doua frameuri nume frame1 si frame2. Cu ajutorul acestor nume putem schimba informatii intre cele doua frame-uri.
Un script poate rezolva urmatoarea problema: utilizatorul clickeaza pe un link in primul frame - dar pagina se incarca in cel de-al doilea frame si nu in primul. Acest exemplu poate fi folosit pentru meniuri, unde un frame ramane intotdeauna la fel si ofera legaturi pentru a naviga prin site.
Trebuie sa analizam trei cazuri:

parent window/frame accesses child frame
child frame accesses parent window/frame
child frame accesses another child frame

Din punct de vedere a ferestrei cele doua frameuri se numesc frame1 si frame2. Puteti vedea in imaginea de mai sus ca exista o conexiune directa din fereastra parinte a fiecarui frame. Deci daca avem un script in fereastra parinte - in pagina care creaza frame-urile - si doriti sa accesati frame-urile trebuie doar sa folositi numele frame-ului. De exemplu putem scrie:

frame2.document.write("A message from the parent window.");

Cateodata veti dori sa accesati fereastra parinte dintr-un frame. Acest procedeu poate fi util atunci cand doriti sa eliminati frame-urile. Eliminarea structurii de frames inseamna doar incarcarea unei pagini noi in locul paginii care a creeat frame-ul. Aceasta este in acest caz fereastra parinte. Putem accesa fereastra parinte (parent frame) din interiorul ferestrelor 'copil' cu ajutorul parent. Pentru a incarca un nou document trebuie sa dam un nou URL in location.href. Deoarece dorim sa eliminam frame-urile trebuie sa utilizam obiectul locatie al ferestrei parinte. Fiecare frame incarca o anumita pagina, deci vom avea o locatie-obiect pentru fiecare frame. Putem incerca o noua pagina in fereastra parinte cu comanda:

parent.location.href= "http://...";

Foarte des veti avea de infruntat problema de a accesa o frame 'copil' din alta frame 'copil'. Cum puteti scrie ceva din interiorul primei ferestre in cea de-a doua fereastra - ce comanda sa folosim intr-o pagina numita page1.htm? In imaginea noastra puteti vedea ca nu exista legatura directa intre cele doua frame-uri. Aceasta inseamna ca nu putem apela frame2 din frame1 deoarece frame-ul acesta nu cunoaste existenta celuilalt. Din punctul de vedere a ferestrei mama (parent) cea de-a doua fereastra (frame)este numita frame2 iar fereastra mama este numita parent vazuta de primul frame. Deci trebuie sa scriem urmatoarele pentru a avea acces la obiectul document al celei de-a doua ferestre de control (frame):

parent.frame2.document.write("Hi, this is frame1 calling.");

Bare de navigatie

Haideti sa ne ocupam de bare de navigatie. Vom avea mai multe legaturi intr-o singur frame. Daca utilizatorul clickeaza una dintre aceste legaturi paginile nu vor fi afisate in acelasi frame - vor fi incarcate intr-o a doua fereastra cadru (frame).

Iata un exemplu:

Pentru inceput avem nevoie de un script care creeaza frame-uri. Documentul va arata ca primul exemplu pe care l-am avut in aceasta parte a tutorialului:

frames3.htm

<html>
<frameset rows="80%,20%"> 
  <frame src="start.htm" name="main"> 
  <frame src="menu.htm" name="menu"> 
</frameset> 
</html>

Pagina start.htm este pagina de intrare care va fi afisata in frame-ul main inca de la inceput. Nu exista cerinte speciale petru aceasta pagina.
Urmatoarea paina este incarcata in fereastra cadru (frameul) menu:

menu.htm

<html>
<head>
<script language="JavaScript">
<!-- hide

function load(url) {
  parent.main.location.href= url;
}

// -->
</script>
</head>
<body>

<a href="javascript:load('first.htm')">first</a>
<a href="second.htm" target="main">second</a>
<a href="third.htm" target="_top">third</a>

</body>
</html>

Aici puteti observa diferite moduri de a incarca o pagina noua in frame-ul main. Prima legatura foloseste functia load(). Sa vedem cum apelam aceasta functie:

<a href="javascript:load('first.htm')">first</a>

Puteti observa ca am lasat browserul sa execute codul JavaScript in loc sa incarce alta pagina - trebuie doar sa folosim javascript: in interiorul proprietatii href. Observati ca am scris 'first.htm' in interiorul unoor paranteze. Acest sir este transferat functiei load(). Functia load() este definita prin:

function load(url) {
  parent.main.location.href= url;
}

Trebuie sa observati ca am scris url in interiorul parantezelor. Aceasta inseamna ca sirul 'first1.htm' este inmagazinat in variabila url. In interiorul functiei load() putem sa utilizam aceasta variabila. Vom vedea si alte exemple a acestui concept de translatare a variabilelor pe masura ce vom inainta in tutorial.

Cea de-a doua legatura foloseste target. Aceasta nu este JavaScript. Este vorba de cod HTML. In acest caz este de ajuns sa specificati numele ferestrei cadru (frame). Va rog sa observati ca nu trebuie pus parent inainte de numele ferestrei cadru (frame). S-ar putea ca unii dintre dumneavoastra sa fie confuzionati de aceste afirmatii. Motivul este ca target este cod HTML si nu JavaScript.
Cea de-a treia legatura (link) arata modul de a elimina ferestrele cadru (frames) cu ajutorul proprietatii target.

Daca doriti sa eliminati ferestrele cadru cu ajutorul functiei load() trebuie doar sa scrieti parent.location.href= url in interiorul functiei.

Deci ce varianta este cea mai buna? Depinde de scriptul dumneavostra si ce vreti sa faca. Proprietatea target este foarte simplu de utilizat. O puteti utiliza daca doriti sa incarcati o pagina intr-o fereastra cadru. Solutia JavaScript (i.e. prima legatura) este folosita daca doriti sa faceti mai multe lucruri ca o consecinta a clickului pe o legatura. O problema des intalnita este sa incarcati doua pagini deodata in doua ferestre cadru (frames) diferite. Desi puteti rezolva aceasta cu proprietetea target, utilizand o functie JavaScript rezolvarea este mult mai simpla. Sa presupunem ca avem trei ferestre cadru numite frame1,frame2 si frame3. Utilizatorul clickeaza pe o legatura in frame1. Apoi dorita sa incarcati doua pagini in celelalte doua ferestre cadru (frames). Puteti utiliza aceasta functie:

function loadtwo() {
  parent.frame1.location.href= "first.htm";
  parent.frame2.location.href= "second.htm";
}

Daca doriti sa aveti o functi mai flexibila puteti folosi o variabila. Scriptul arata astfel:

function loadtwo(url1, url2) {
  parent.frame1.location.href= url1;
  parent.frame2.location.href= url2;
}

Apoi puteti apela aceasta functie cu loadtwo("first.htm", "second.htm") sau loadtwo("third.htm", "forth.htm"). Translatarea variabilei face ca functia sa fie mai flexibila. O puteti utiliza de cate ori doriti in situatii diferite.

[previous] [index] [next]

©1996,1997 by Stefan Koch
e-mail:skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
My JavaScript-book