| PROIECTARE SITE WEB > DOCUMENTATIE - JAVASCRIPT - Ferestre
cadru |
Proiectare Site si Web Design - JavaScript - Ferestre Cadru
O intrebare frecventa este cum interactioneaza frame-urile (cadrele)
si JavaScript. Mai intai trebuie sa explicam ce sunt frame-urile si
la ce pot fi folosite. Fereastra browserului poate fi impartita in
mai multe frame-uri (cadre, ferestre). Aceasta inseamna ca un frame
reprezinta o parte din suprafata ferestrei browserului. Fiecare cadru
(frame) incarca in el un document (de cele mai multe ori de tip HTML).
De exemplu putem creea doua cadre astfel: in primul frame putem incarca
pagina de deschidere a site-ului Netscape iar in cel de-al doilea
pagina principala a site-ului Microsoft.
Desi crearea de frame-uri este o problema HTML, dorim sa descriem
in cele ce urmeaza cateva lucruri de baza. Pentru crearea de cadre
se folosesc doua taguri: <frameset> si <frame>. O pagina
HTML care creaza doua frame-uri 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 produce doua frame-uri. Remarcam
utilizarea proprietatilor "rows" in tagul
FRAMESET. Aceasta inseamna ca cele doua cadre create cu tagul FRAME
se afla unul deasupra celuilalt. Frame-ul de sus incarca pagina HTML
"page1.htm" iar frame-ul de jos prezinta documentul "page2.htm".
Daca dorim sa avem coloane in loc de randuri trebuie sa scriem
"cols" in loc de "rows" inauntrul tagului
FRAMESET. Partea "50%,50%"
specifica in procente ecran cat de mari sunt cele doua ferestre. Putem
de asemenea sa scriem "50%,*"
daca nu dorim sa calculam cat de larga trebuie sa fie cea de-a doua
fereastra pentru a ajunge la 100% din spatiul ramas. Putem de asemenea
specifica dimensiunea in pixeli omitand simbolul %.
Fiecare frame are un nume unic specificat
cu ajutorul atributului "name" din eticheta
<frame>. Acest atribut ne va ajuta sa accesam frame-urile cu
ajutorul JavaScript.
Iata un exemplu:
<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>
Putem fixa dimensiunile marginii prin intermediul
proprietatii (atributului) "border" din eticheta
<frameset>. "Border=0" inseamna ca nu vom avea margine
la cadru (atributul 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 utiliza cele 2 cadre create
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 aferenta primului exemplu:
In varful iererhiei este fereastra browser. Aceasta
fereastra este impartita in doua frame-uri. Fereastra mare (implicita)
a browserului este "parinte" in aceasta ierarhie iar cele
doua frame-uri sunt "copiii". Putem sa dam celor doua fram-euri
numele "frame1" si "frame2". Cu ajutorul acestor
nume putem schimba informatii intre cele doua frame-uri.
Trebuie sa analizam trei cazuri:
1. "parent window/frame"
acceseaza "child frame"
2. "child frame" acceseaza "parent
window/frame"
3. "child frame" acceseaza un alt "child
frame"
Din punct de vedere al ferestrei parinte cele
doua frame-uri copil se numesc "frame1" si "frame2".
Putem vedea in imaginea de mai sus ca exista o conexiune directa intre
fereastra parinte si fiecare frame copil in parte. Deci daca avem
un script in fereastra parinte - in pagina care creaza frame-urile
- si dorim sa accesam prin intermediul acestuia frame-urile (continutul
unuia dintre ele) pentru a scrie date, trebuie doar sa folosim numele
frame-ului. De exemplu putem scrie:
frame2.document.write("A
message from the parent window.");
Iata si o ilustrare a exemplului:
Cateodata putem dori sa accesam fereastra parinte
dintr-un frame pentru a rescrie (spre exemplu) continutul acesteia,
indepartand structura de frame-uri la reaccesarea paginii parinte
pornind dintr-un frame copil. Asadar acest procedeu poate fi util
atunci cand dorim sa eliminam pe cat posibil frame-urile la accesari
repetate. Eliminarea structurii de cadre inseamna doar incarcarea
unei pagini noi in locul paginii (ferestrei) parinte care a creeat
frame-urile. Putem accesa fereastra parinte ("parent frame")
din interiorul ferestrelor copil cu ajutorul cuvantului predefinit
"parent". Pentru a incarca un nou document trebuie sa furnizam
un nou URL parametrului "location.href". Deoarece dorim
sa eliminam frame-urile trebuie sa utilizam obiectul locatie al ferestrei
parinte. Vom avea o locatie obiect pentru fiecare frame, inclusiv
pentru frame-ul parinte apelat din frame-urile copil. Putem incerca
o noua pagina in fereastra parinte cu comanda:
parent.location.href=
"http://...";
Iata si o ilustrare a exemplului:
Foarte des ne vom pune problema accesarii unui
frame copil din alt frame copil. Cum putem influenta din interiorul
primei ferestre continutul celei de-a doua? Ce comanda sa folosim
intr-o pagina numita "page1.htm" reprezentand un frame copil?
In imaginea aferenta exemplului folosit de noi pana acum putem vedea
ca nu exista legatura directa intre cele doua frame-uri. Aceasta inseamna
ca nu putem apela "frame2" din "frame1" deoarece
frame-urile nu se cunosc intre ele (nu stie unul de existenta celuilalt).
Ele sunt conectate indirect, prin intermediul ferestrei parinte. Din
punct de vedere al ferestrei parinte (parent), cea de-a doua fereastra
(frame2) este vazuta copil, in timp ce fereastra browserului este
vazuta ca parinte de catre primul frame (frame1). Deci in primul frame
trebuie sa scriem urmatoarea referire pentru a avea acces la obiectul
document al celui de-al doilea frame (frame2):
parent.frame2.document.write("Hi,
this is frame1 calling.");
Iata si ilustrarea acestui exemplu:
|
Creare
si actualizare site