 |
JavaScript-skolan
Frames |
 |
2. Self, frame, top och parent
3. Fönsterreferens
4. Skriv ut frames
5. Uppdatera två frames samtidigt
6. Övningar
Obs!
Alla exempel och facituppgifter öppnas i ett nytt fönster!
1. Inledning
På de två föregående sidorna om fönster har jag visat några enkla kommandon för att öppna, anpassa, placera och hänvisa till fönster. Här skall jag bygga vidare på dessa kunskaper och arbeta med frames.
Känner du dig osäker på frames kan du börja med att läsa min sida om frames i Html-sektionen. Gå dit >
2. Self, frame, top och parent
Dessa begrepp känner du igen från Html-koden. De används även i JavaScript. Det är därför bra att känna till hur de fungerar.
När
man endast använder ett fönster
kallas det för window
eller self. Detta har du sett
på de tidigare sidorna.
Det dokument som laddas i fönstret (med <body>) kallas för document.
I många fall blir här window, self och document samma sak och det räcker oftast med att man anger dokumentobjektet, document, och sedan de objekt som finns under det.
När man arbetar med frames ser saken lite annorlunda ut, som bilden nedan visar.
Det
fönster som <frameset>-elementet
laddas i kallas för top
eller parent. Man använder
ofta top för att prata om det
översta fönstret i hierarkin,
t.ex om man använder nästlade
frames (<frameset>-element innanför
andra <frameset>-element).
Ifall man inte har nästlade frames så är alltså top och parent samma sak. De saknar dokumentobjekt, som du ser i bilden.
I stället har de barn (child) som skapas med <frameset>. Dessa objekt är fönsterobjekt, som var för sig benämns antingen med frame eller med det namn man gett dem i Html-koden.
Båda fönstren pratar dock med sig själva som window. De har var sitt dokumentobjekt, vilket laddas med <frame>-elementen. Hela hierarkin blir således: top - parent - window - document.
3. Fönsterreferens
Så länge ett objekt, variabel, funktion, osv, endast används i ett dokument i ett och samma fönster, behöver man inte bekymra sig om fönsterreferens. Men så fort man vill gå utanför ett fönster (window) måste man tänka på vad det är man hänvisar till.
på förra sidan visade jag ett exempel på hur viktigt detta är. Se avsnitt 9 och 10. Läs mer >
Man
skiljer mellan tre olika slags referens.
Bilden visar ett schema över
detta:
A. Child - Parent
B. Parent - Child
C. Child - Child
De vanligaste typerna av referens är A och C. För referenser av typen A gäller syntaxen enligt följande:
parent.Funktion...osv...
Här anropas scriptet i parent och detta är ofta ett enkelt och effektivt sätt att utnyttja det första fönstret på. Genom att scriptet ligger där kan alla underordnade fönster nå det.
För referenser av typen B gäller följande syntax:
window.frame1.form1...osv...
eller
window.frames[0].forms[0]...osv...
I första fallet använder man det namn fönstret (child) fått. Det läggs efter window, som parent-fönstret kallar sig själv. På andra raden är "frames[0]" en array (en slags lista) över de frames som finns under parent och siffran inom hakparentserna anger vilken av dessa i listan som avses. Detsamma gäller sedan för forms[0].
För referenser av typen C gäller följande syntax:
parent.frame1.form1...osv...
eller
parent.frames[0].forms[0]...osv...
Först anropar man alltså parent och därefter den frame man vill nå. Man får se upp med att dokumentet i den frame man anropar har laddats, annars får man scriptfel. Det finns en särskild händelsehanterare för att undvika detta som heter "onLoad".
Exempel 1
<frameset cols="50%,50%">
<frame src="js_frames_x1_left.html"
name="left">
<frame src="js_frames_x1_right.html"
name="right">
</frameset>
+
<script language="JavaScript">
<!--
document.write("Detta är
frame:" + parent.frames[0].name);
-->
</script>
Titta på exemplet i praktiken >
Scriptet gör så att namnet på fönstret skrivs ut i dokumentet. Scriptet gäller för vänstra fönstret. För det högra måste "frames[0]" ändras till "frames[1]".
Exempel 2
<frameset cols="50%,50%">
<frame src="js_frames_x2_left.html"
name="left">
<frame src="js_frames_x2_right.html"
name="right">
</frameset>
+
Vänstra fönstret:
<form name="Left">
<input type="text" name="LeftText"
value="Skriv en rad!" />
</form>
Högra fönstret:
<form name="Right">
<input type="text" name="RightText"
value="Flytta texten hit!"
/>
<input type="button"
name="RightButton" value="Klicka!"
onClick="self.document.Right.RightText.value
= parent.left.document.Left.LeftText.value"
/ >
</form>
Titta på exemplet i praktiken >
Vad som händer är att texten i det vänstra fönstret flyttas till textfältet i det högra. Det är möjligt tack vare referens till rätt objekt i rätt fönster.
Exempel 3
<frameset cols="30%,70%">
<frame src="js_frames_x3_left.html"
name="left">
<frame src="js_frames_x3_right.html"
name="right">
</frameset>
+
Vänstra fönstret:
<form name="Left">
<select size="1" name="ValjFarg"
onChange="top.frames[1].document.bgColor
= this.options[this.selectedIndex].value">
<option value="white">Vit</option>
<option value="blue"
selected>Blå</option>
<option value="yellow"
selected>Gul</option>
<option value="red" selected>
Röd</option>
</select>
</form>
Titta på exemplet i praktiken >
I vänstra fönstret visas en rullgardinsmeny, där besökaren kan välja en färg. Tack vare kommandot onChange kan färgen aktiveras i det högra fönstret.
Kommandot "this.options[this.selectedIndex].value" skrivs ibland så här: "this.options.value". Men så som jag skrivit det ökar kompatibiliteten så att fler webbläsare förstår att "this" faktiskt avser select-objektet i just detta formulär.
4. Skriva ut frames
Med metoden print() skrev vi på förra sidan ut ett fönster. Då man använder frames kan man tillämpa samma metod på enskilda fönster, men hur bär man sig åt för att skriva ut samtliga fönster på samma papper?
Det är faktiskt inga problem, tack vare fönsterreferensen:
Exempel 4
<frameset cols="60%,40%">
<frame src="js_frames_x4_left.html"
name="left">
<frame src="js_frames_x4_right.html"
name="right">
</frameset>
+
<form>
<input type="button"
value="Skriv ut detta fönster"
onClick="window.print()"><br
/>
<input type="button"
value="Skriv ut högra fönstret"
onClick="parent.right.print()"><br
/>
<input type="button"
value="Skriv ut båda fönstren"
onClick="parent.print()">
</form>
Titta på exemplet i praktiken >
Tricket är självklart att ange rätt sökväg till de olika fönstren. Dock måste man vara på det klara med att webbläsarnas utskriftshantering ibland är under all kritik. Därför fungerar detta inte alltid...
5. Uppdatera två frames samtidigt
Här är ett exempel på hur man kan göra:
<form>
<input type="button"
value="Ändra två frames
samtidigt"
onClick="parent.frames[1].location='webbsida_1.html';
parent.frames[2].location='webbsida_2.html';">
</form>
Ett annat exempel är följande:
Exempel 5
<frameset cols="150,*">
<frame src="js_frames_x5_left.html"
name="left">
<frameset rows="50%,50%">
<frame src="js_frames_x5_ovan.html"
name="ovan">
<frame src="js_frames_x5_nedan.html"
name="nedan">
</frameset>
+
Left:
<script language="JavaScript">
<!--
function OvanNedan() {
top.frames[1].location = "js_frames_x5_ovan.html";
top.frames[2].location = "js_frames_x5_nedan.html";
}
function NedanOvan() {
top.frames[1].location = "js_frames_x5_nedan.html";
top.frames[2].location = "js_frames_x5_ovan.html";
}
-->
</script>
+
<form>
<input type="button"
value="Ovan överst"
onClick="OvanNedan()" name="knapp1">
<input type="button"
value="Nedan överst"
onClick="NedanOvan()" name="knapp2">
</form>
Titta på exemplet i praktiken >
Med funktionerna får man fönstren att byta plats. Det går också att använda vanliga länkar med onClick. Men man kan också pröva att skriva så här:
Exempel 6
samma som ovan, men:
<a href="javascript:OvanNedan()">Ovan
överst</a>
<a href="javascript:NedanOvan()">Nedan
överst</a>
Titta på exemplet i praktiken >
Vi vill ju inte öppna en enda sida utan vill ju ha en funktion aktiverad som i sin tur uppdaterar två sidor. Därför använder man sig av detta kommando.
6. Övningar
Övning
1
Repetera begreppen self, frame, top
och parent så att du har de
klart för dig! Gör gärna
en modell med nästlade frames
och försök namnge de olika
fönstren med rätt begrepp.
Övning
2
Utgå ifrån Exempel 2 och
försök att göra en
likadan lösning, där texten
flyttas från en textruta till
en annan med ett script.
Övning
3
I Exempel 3 visade jag ett sätt
att välja bakgrundsfärg.
Gör ett liknande script som byter
också textfärgen!
Övning
4
Undersök scriptet i Exempel 4
och se om du kan få webbläsaren
att skriva ut de olika fönstren.
Övning
5
Studera de olika exemplen som visar
hur man uppdaterar två frames
samtidigt. Fundera över när
de olika sätten kan vara att
föredra.