 |
JavaScript-skolan
Mer om fönster |
 |
2. Ändra dokumentets titel
3. Visa datum, URL och referenser
4. Skriva ut ett fönster med print
5. Metoderna back, forward, home och stop
6. Placera ett fönster
7. Ändra storleken dynamiskt
8. Metoderna scrollTo och scrollBy
9. Stänga ett fönster
10. Metoderna focus och blur
11. Övningar
Obs!
Alla exempel och facituppgifter öppnas i ett nytt fönster!
1. Inledning
På förra sidan fick du lära dig lite om hur man skapar nya fönster. Här tänkte jag bygga vidare på de kunskaperna och titta på några fler finesser, bl.a hur man skriver ut, placerar och stänger fönster med JavaScript.
2. Ändra dokumentets titel
Detta kan vara bra om man inte vill använda <title> eller om man vill ändra titeln dynamiskt.
Exempel 1
<script language="JavaScript">
<!--
var Namn = "Jonas";
document.title = "Välkommen
till " + Namn + "hemsida";
document.write(document.title);
-->
</script>
Titta på exemplet i praktiken >
Scriptet är ju inte särskilt avancerat. Jag har lagt till en variabel, som man kan låta ändras via ett formulär eller liknande.
3. Visa datum, URL och referenser
Det går också att använda andra finesser. Här visar jag när dokumentet ändrades senast, vilken internetadress (=URL) det har och dokumentets ursprung:
Exempel 2
<body>
<script language="JavaScript">
document.write("Denna sida uppdaterades:
" + document.lastModified + "<br />");
document.write("Denna sidas adress
är: " + document.URL + "<br
/>");
document.write("Denna sidas ursprung
är: " + document.referrer);
</script>
Titta på exemplet i praktiken >
De första två raderna känner du igen vid det här laget. Den tredje raden, som innehåller "referrer" är lite svårare att förstå. Om en sida öppnar en annan, som i exemplet, kallas ursprungssidan för referrer (referring page). Det är alltså den som hänvisar till den nya sidan. Det som visas är alltså den adress som den nya sidan härstammar ifrån.
Om sidan ligger på datorn visas hela sökvägen till den. Ligger den på nätet blir adressen betydligt enklare att läsa.
Obs!
Scriptet får inte stå
mellan <!-- och -->. Det skrivs
även i <body> för
att synas på sidan!
4. Skriva ut ett fönster med print
Vad gör man när man vill att besökaren skall kunna skriva ut ett dokument på en sida och man samtidigt har stängt av verktygsfältet (=toolbar)? Då syns ju inte knappen och besökaren får svårt med utskriften.
Ett sätt att komma runt detta problem är då att använda metoden print, enligt följande:
Exempel 3
<form name="form1">
<input type="button"
value="Skriv ut" onClick="window.print();">
</form>
Titta på exemplet i praktiken >
Scriptet förutsätter självklart att en skrivare finns inkopplad. Om webbläsaren inte skulle hitta någon skrivare får man i stället upp ett felmeddelande.
5. Metoderna back, forward, home och stop
Samma problem får man om besökaren skall kunna gå tillbaka (back), framåt (forward), till startsidan (home) eller stoppa laddningen av sidan (stop). Om man har stängt av verktygsfältet (toolbar) kan man i stället skapa egna knappar, som jag nu visar:
Exempel 4
<form name="form1">
<input type="button"
value="Tillbaka" onClick="window.back();">
<input type="button"
value="Nästa sida"
onClick="window.forward();">
<input type="button"
value="Startsidan" onClick="window.home();">
<input type="button"
value="Stoppa laddningen"
onClick="window.stop();">
</form>
Titta på exemplet i praktiken >
Nackdelen är ju här att "Tillbaka" och "Startsidan" inte alltid är detsamma som varifrån besökaren kom eller har som startsida. Man bör därför använda vanliga Html-länkar om man verkligen vill att besökaren skall hamna rätt!
6. Placera ett fönster
Ett nytt fönster går att placera var som helst på skärmen, så länge det är synligt. Försöker man flytta det utanför skärmens yta kommer detta förmodligen inte att lyckas. Då måste man nämligen använda andra metoder än dem jag visar här. Webbläsarna är "vaccinerade" mot sådana användningar, av säkerhetsskäl.
Metoderna som används är moveTo() och moveBy(). Båda utgår ifrån två värden: ett horisontellt värde i x-led och ett värde i y-led. Översta vänstra pixeln har värdet (0,0).
Exempel 5
<script language="JavaScript">
<!--
window.moveTo(100,100);
-->
</script>
Titta på exemplet i praktiken >
Jag har placerat scriptet i det nya fönstrets <head>-sektion, för att få det (och inte referrer-fönstret) att flytta sig. Man kan också använda sig av följande metod för att få en längre fördröjning av flytten:
Exempel 6
<script language="JavaScript">
<!--
setTimeout("window.moveTo(100,100)"500);
-->
</script>
Titta på exemplet i praktiken >
En annan maetod, moveBy(), används för att lägga till ett relativt värde, som adderas till det första fönstrets värde. Man använder det ofta för att det nya fönstret inte skall täcka det gamla:
Exempel 7
<script language="JavaScript">
<!--
window.moveBy(25,0);
-->
</script>
Titta på exemplet i praktiken >
För att flytta fönstret åt vänster använder man i stället ett negativt värde. Man måste dessutom skriva båda värdena även om man inte vill flytta fönstret åt ett visst håll. Då använder man värdet noll som indikerar att ingen förändring skall ske.
För att få ett fönster att uppta hela skärmen kan man använda följande script:
Exempel 8
<script language="JavaScript">
<!--
function HelaSkarmen() {
window.moveTo(0,0);
window.outerWidth = screen.availWidth;
window.outerHeight = screen.availHeight;
}
-->
</script>
+
<form name="form8">
<input type="button"
value="Maximera fönstret"
onClick="HelaSkarmen();">
</form>
Titta på exemplet i praktiken >
Den första raden flyttar fönstret överst till vänster. Sedan säger de två nästa raderna att fönstret skall fylla ut hela skärmens bredd. Det fungerar dessvärre inte jättebra i alla webbläsare.
Man kan ibland få ett fönster att röra sig i sidled eller diagonalt över skärmen:
Exempel 9
<script language="JavaScript">
<!--
function FlyttaDiagonalt() {
for (i=1; i < 50; i++)
window.moveBy(i,i)
}
-->
</script>
+
<body onLoad="FlyttaDiagonalt()">
Titta på exemplet i praktiken >
Fönstret rör sig med 1 pixel i taget, både nedåt och åt höger, tills dess att 50 pixlar uppnåtts.
7. Ändra storleken dynamiskt
När man har öppnat ett nytt fönster vill man ibland öka dess storlek ytterligare. Då kan man använda metoderna resizeTo() och resizeBy(). Båda utgår från det nedersta högra hörnet av fönstret och påminner i övrigt mycket om metoderna i föregående avsnitt.
Exempel 10
<script language="JavaScript">
<!--
window.resizeTo(500,700);
-->
</script>
Titta på exemplet i praktiken >
Negativa värden används för att krympa fönstret. Följande exempel låter besökaren välja storleken själv:
Exempel 11
<script language="JavaScript">
<!--
function BytStorlek(form) {
var x = parseInt(form.x.value)
var y = parseInt(form.y.value)
window.resizeTo(x, y)
}
-->
</script>
+
<form>
Bredden: <input type="text"
name="x" value="200"
/>
<br />Höjden: <input
type="text" name="y"
value="200" />
<br /><input type="button"
name="resizeTo" value="Byt
storlek!" onClick="BytStorlek(this.form)"
/>
</form>
Titta på exemplet i praktiken >
Fönstret ändrar storlek utifrån vad besökaren skriver, förutsatt att värdena inte är större än fönstrets storlek. Ibland kan det ställa till problem om besökaren har maximerat webbläsarens fönster. I synnerhet gäller detta metoden resizeBy, som då ibland inte fungerar.
Metoden parseInt används här till att omvandla en textsträng (=den besökaren skriver in) till ett numeriskt värde, som sedan används för att ändra storleken.
8. Metoderna scrollTo och scrollBy
Metoderna scrollTo() och scrollBy() får bli ett litet sidospår. Deras motsvarighet i Html är "ankare", som används för att flytta besökaren till olika delar av sidan. Men där man i Html använder platser får man i JavaScript hålla till godo med pixelvärden. Därför är dessa metoder inte lika praktiskt användbara.
I en tidigare version av JavaScript-språket använde man metoden scroll(). Den har numera ersatts av scrollTo(). Den utgår ifrån ett fast pixelvärde, till skillnad från scrollBy(), som har ett relativt värde.
Man måste också komma ihåg att pixelvärdena räknas inifrån fönstret. Pixelvärdet för scrollTo(0,0) tar alltså ingen hänsyn till var själva fönstret befinner sig på skärmen.
Exempel 12
<script language="JavaScript">
<!--
window.scrollTo(10,200);
-->
</script>
Titta på exemplet i praktiken >
9. Stänga ett fönster
Som jag redan nämnt kan man ibland behöva knappar som man stängt av via kommandot "toolbar=no". I avsnitt 4 visade jag hur ma skapar en knapp för att skriva ut ett dokument. På motsvarande sätt kan man använda metoden close() för att stänga det:
Exempel 13
<form name="Exempel_13">
<input type="button"
value="Stang" onClick="window.close()"
/>
</form>
Titta på exemplet i praktiken >
Knappen i det nya fönstret stänger det nya fönstret. Men hur bär man sig åt för att stänga det nya fönstret från det gamla fönstret? Jo, man måste då skapa en referens från det gamla till det nya fönstret:
I och med att hänvisningen finns kan vi inte utelämna window i variabelns värde. Detta beror på att hänvisningen till det nya fönstret då försvinner.
Exempel 14
<script language="JavaScript">
<!--
var NyttFonster;
function skapaNyttFonster() {
NyttFonster = window.open("js_window2_x14a.html",
"Exempel14", "width=300,
height=400");
}
function avslutaNyttFonster() {
if (NyttFonster) {
NyttFonster.close();
}
}
-->
</script>
+
<form name="Exempel_14">
<input type="button"
name="A" value="Skapa
nytt fönster" onClick="skapaNyttFonster()">
<input type="button"
name="B" value="Stäng
nytt fönster" onClick="avslutaNyttFonster()">
</form>
Titta på exemplet i praktiken >
Den första funktionen borde du känna igen. Den öppnar ett nytt fönster. Jag använder en funktion för att kunna anropa den från formuläret.
I den andra funktionen kontrolleras först om det nya fönstret är öppnat. Detta sker i if-satsen. Om funktionen NyttFonster är aktiverad så skall funktionen fortsätta och då använda metoden close() för att stänga det.
Använder man inte referensen NyttFonster.close() här kommer det gamla fönstret att stängas i stället!
10. Metoderna focus och blur
Nya fönster som öppnas försvinner lätt om man råkar klicka bredvid dem. Större fönster lägger sig då gärna ovanpå. Att sedan hitta fönstren kan vara svårt. Man måste antingen leta upp dem på aktivitetsfältet (längst ner på skärmen i Windows) eller under menyn Window/Fönster i webbläsaren.
Är man beroende av att besökaren använder det nya fönstret måste man därför försöka hitta lösningar för att fönstret skall finnas kvar. Ett sätt kan vara att placera det smart. Ett annat är att använda metoderna focus() och blur().
Focus() fokuserar eller aktiverar ett fönster. Blur() gör i stället värtom och tar bort fokus så att något annat fönster kan aktiveras.
Följande exempel visar principerna för detta:
Exempel 15
DEL 1
<script language="JavaScript">
<!--
var NyttFonster;
function skapaNyttFonster() {
NyttFonster = window.open("js_window2_x15a.html",
"Exempel15", "width=300,
height=400");
}
-->
</script>
+
DEL 2
<form name="Exempel_15">
<input type="button"
name="A" value="Skapa
nytt fönster" onClick="skapaNyttFonster()"
/>
<input type="button"
name="B" value="Fokusera
det nya fönstret" onClick="NyttFonster.focus()"
/>
</form>
+
DEL 3
<form name="Exempel_15a">
<input type="button"
value="Fokusera det gamla fönstret"
onClick="self.opener.focus()"
/>
<input type="button"
value="Ta bort detta fönstrets
fokus" onClick="self.blur()"
/>
<input type="button"
value="Stäng fönstret"
onClick="window.close()"
/>
</form>
Titta på exemplet i praktiken >
Den första delen ligger på första sidan man kommer till då man klickar på länken här ovan. den innehåller dels en funktion för att öppna ett nytt fönster, som jag visade i Exempel 14.
Sedan finns på samma sida en andra del, som består av ett formulär med två knappar. Den första öppnar det nya fönstret, som i Exempel 14. Den andra knappen använder sig av det nya fönstrets namn, NyttFonster, och tillämpar metoden focus() på den.
Den tredje delen finns på den nya sidan som öppnas, NyttFonster. Den har tre knappar och man använder här egenskapen "self" för två av dem. "Self" är här synonym med objektet "window". För att webbläsaren skall veta vilket fönster som avses (det nya eller gamla) har jag lagt till egenskapen "opener" för första knappen:
onClick="self.opener.focus()
Opener garanterar här att det nya fönstret får en referens tillbaka till det gamla fönstret. Egenskapen är så stark att man inte behöver använda "self" framför här. Jag har dock med den för kompatibilitetens skull.
Nästa knapp har ett kommando som ser ut så här:
onClick="self.blur()
Här finns inte "opener" med eftersom det är det nya fönstret (self) som skall "avfokuseras" eller "blurras".
11. Övningar
Du har nu kommit ganska långt i JavaScript-skolans lektioner. Därför måste du nu börja arbeta mera självständigt. I de fortsatta övningarna ger jag därför bara facit till sådant jag inte gått igenom tillräckligt.
Övning
1
I Exempel 2 tittade vi på hur
man kan lägga in datum, URL och
referrer-information på en sida.
Undersök hur dessa kommandon
tolkas då sidan ligger på
hårddisken respektive på
nätet!
Övning
2
Följande script formaterar datumet
så att det går lättare
att läsa på sidan. Pröva
att lägga in det sist på
en sida och se hur det fungerar på
hårddisken respektive på
nätet:
<script language="JavaScript">
Uppdaterad = new Date(document.lastModified);
Ar = Uppdaterad.getFullYear();
Manad = Uppdaterad.getMonth() + 1;
Datum = Uppdaterad.getDate();
document.writeln("Denna sida
uppdaterades: " + Ar + "-"
+ Manad + "-" + Datum)
</script>
Övning
3
Utgå ifrån Exempel 5 och
öppna ett fönster som är
200x200 pixlar stort och ligger 200x200
pixlar från översta vänstra
kanten. Lägg också in en
stäng-knapp i det nya fönstret.
Övning
4
Utgå från Exempel 14 och
försök skapa ett nytt fönster
som du kan stänga från
det gamla fönstret!
Övning
5
Studera Exempel 15 och försök
skapa ett script som flyttar fokus
mellan olika fönster på
samma sätt.