Öppna popup-fönster från en textlänk

Variabler är inte mycket att ha, om man inte kan variera värdet på dem. Här skall vi deklarera en variabel som har en del av sina värden fastställda redan i javaskriptet, men får en del andra värden från den anropande textlänken.

Med hjälp av textlänkar vill du öppna sidor i olika småfönster, och du vill själv bestämma var fönstren skall öppnas, hur stora de skall vara och vilka egenskaper de skall ha. Du vill dessutom kunna variera de här förutsättningarna för olika länkar.

Det här gör vi med ett enda litet skript som placeras i HEAD-elementet. Detta skript anropas sedan från de olika textlänkarna, som samtidigt talar om vilka egenskaper fönstren skall ha.

Man öppnar ett nytt fönster med koden window.open(). I parentesen anger man i tur och ordning URL, namn och egenskaper för det nya fönstret. Vi gör en variabel som utför detta:

visaNySida=window.open(url,nyNamn,egenskaper);

Värdet på "url" kommer den här variabeln att få från textlänken, men "nyNamn" och egenskaper skall vi ange i skriptet:

var nyNamn="nyaRutan";
var egenskaper="top=" + top + ",left=" + left + ",width=" + width + ",height=" + height + ",status=" + status;
egenskaper+=",menubar=no,scrollbars=yes,location=no,toolbars=no";
visaNySida=window.open(url,nyNamn,egenskaper);

var nyNamn="nyaRutan";
Den här raden deklarerar variabeln med namnet på det nya fönstret.

var egenskaper= ...
I den här raden finns värden som variabeln kommer att få direkt från länken. Genom att vi skriver kodraden så här, får vi möjligheten att ge det nya fönstret olika egenskaper beroende på vilken länk skriptet anropas från.

egenskaper+= ...
Här anger vi "fasta värden", det vill säga sådana värden som vi vill skall gälla för alla popup-fönster. När vi skriver egenskaper+, blir resultatet att den tidigare deklarerade variabeln får ytterligare värden, utöver vad som angavs i den ursprungliga deklarationen på raden ovanför.

Om vi skulle utelämna plustecknet, fick variabeln "egenskaper" i stället nya värden som "kastade bort" de gamla.

Man kan lägga alla egenskaperna i en enda lång rad, men skriptet blir lättare att läsa om man skiljer på dem som jag har gjort här: Varierande egenskaper i en rad och fast egenskaper i nästa.

Tillåtna egenskaper och vad de gör

Följande egenskaper anges i antal pixlar:

top Anger antalet pixlar från skärmens överkant till det nya fönstrets överkant
left Anger antalet pixlar från skärmens vänsterkant till det nya fönstrets vänsterkant
width Bredd på fönstret i pixlar
height Höjd på fönstret i pixlar

Följande egenskaper anges som yes eller no, alternativt 1 eller 0:

directories Anger om webbläsarens verktygsrad skall visas
location Anger om webbläsarens adressfält skall visas
menubar Anger om webbläsarens menyrad skall visas
resizable Anger om besökaren skall kunna ändra fönstrets storlek
scrollbars Anger om webbläsarens rullningslister skall visas
status Anger om webbläsarens statusrad skall visas
toolbar Anger om webbläsarens verktygsrad skall visas

Man kan utnyttja en eller flera av dessa egenskaper. De olika valen skiljs åt med kommatecken men utan mellanslag, och hela uppsättningen av egenskaper skrivs mellan citationstecken ["..."].

För att ha något att anropa från textlänken, stoppar vi nu in alltsammans i en funktion och placerar denna mellan SCRIPT-taggarna. Allt som är gemensamt för funktionen innesluts mellan klamrar { ... } och varje skriptrad avslutas med ett semikolon.

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet
function nyRuta(url,top,left,width,height,status) {
var nyNamn="nyaRutan";
var egenskaper="top=" + top + ",left=" + left + ",width=" + width + ",height=" + height + ",status=" + status;
egenskaper+=",menubar=no,scrollbars=yes,location=no,toolbars=no";
visaNySida=window.open(url,nyNamn,egenskaper);
}
// Sluta gömma -->
</SCRIPT>

function nyRuta(url,top,left,width,height,status) {
Mellan parenteserna i funktionens namn anger vi i tur och ordning de värden som funktionen kommer att få från textlänken: URL, top, left, width, height och status.

Nu är själva skriptet färdigt och vi kan övergå till textlänkarna som skall anropa skriptet. Textlänkarna läggs som vanligt mellan BODY-taggarna och ser normalt ut så här:

<A HREF="window1.html">Sidan 1</A>

Men i stället för att anropa sidan window1.html direkt, skall vi anropa funktionen i HEAD. Vi ändrar länkkoden:

<A HREF="javascript:nyRuta()">Sidan 1</A>

Slutligen stoppar vi in de egenskaper som funktionen behöver, nämligen URL, fönstrets placering på skärmen, fönstrets storlek samt statusradens vara eller icke vara:

<A HREF="javascript:nyRuta('window1.html',100,200,100,200,'no')">Sidan 1</A>

eller

<A HREF="javascript:nyRuta('window1.html',100,200,100,200,0)">Sidan 1</A>

citationstecknen kring 'no'
Du ser att värdet för statusrad är satt till 'no', med citationstecken. Det beror på att "egenskaper" är en variabel och 'no' är ett strängvärde – strängvärden måste anges med citationstecken. Om du använder 1 eller 0 i stället, skall du inte sätta ut citationstecknen.

Vad händer?
När din besökare klickar på den här länken kommer sidan window1.html att öppnas i ett eget fönster. Detta placeras med övre vänstra hörnet 100 pixlar från överkanten på skärmen och 200 pixlar från vänsterkanten. Fönstret blir 100 pixlar brett och 200 pixlar högt, och det visas utan statusrad. Resten av sina egenskaper hämtar det nya fönstret från raden "egenskaper+" i funktionen.

Vill du styra fler eller färre egenskaper från textlänken, ändrar du på fyra ställen

• Inom funktionsparentesen i skriptet anger du vilka egenskaper som kommer från textlänken, i tur och ordning som de är angivna i länken.
• I raden "var egenskaper" i skriptet lägger du till eller drar ifrån egenskaper, så att alla egenskaper som kommer från textlänken anges här.
• I raden "egenskaper+" i skriptet lägger du till egenskaper som du tog bort från föregående rad, och tvärtom. 
• I textlänken lägger du till eller drar ifrån egenskaper så att det som anges här stämmer med vad som anges i funktionen. Kom ihåg att använda citationstecken kring strängvärden.

Du vill öppna fler fönster från andra textlänkar men med samma skript. Därför gör du ytterligare en textlänk:

<A HREF="javascript:nyRuta('window2.html',100,400,200,100,'yes')">Öppna sidan 2</A>

eller

<A HREF="javascript:nyRuta('window2.html',100,400,200,100,1)">Öppna sidan 2</A>

Klickandet på den här länken öppnar ett fönster som innehåller sidan window2.html. Fönstret hamnar 100 pixlar från överkanten och 400 pixlar från vänsterkanten. Det blir 200 pixlar brett och 100 pixlar högt, och det visas med statusrad.

Nu kan du fortsätta med hur många textlänkar du vill. Samtliga kan anropa den enda funktionen i HEAD och ta med sig egenskaperna från länken.

Det var allt. Här kan du testa skriptet:

Sidan 1
Sidan 2

© SupportData.Net