Du kan öppna flera sidor i olika ramar från en enda länk

Förutsättningen är att vi har en hemsida som är uppbyggd med ramar. I det här exemplet består sidan av tre ramar: Till vänster finns en smal menyram; resten av sidan är delad i två ramar under varandra. Ramnamnen är "sida", "toppen" och "botten".

Från en enda länk i menyramen skall vi kunna öppna två andra sidor, en i ramen "toppen" och en i ramen "botten". Normalt ser länkkoden ut så här:

<a href="adressen.html">Till sidan Adressen</a>

Det första vi nu skall göra är att "förlama" länken, så att den inte pekar någonstans alls. Det gör vi genom att byta "adressen.html" mot "#". Den nya koden ser ut så här:

<a href="#">Till sidan Adressen</a>

Hur mycket man än klickar på länken, händer ingenting alls. Så kan vi inte ha det - vi måste ha en funktion som fångar upp händelsen "klick på länken" och gör något av den.

Nu kommer händelsehanteraren onClick in i bilden. Denna registrerar klicket och svarar med att köra ett litet JavaScript. Vi bygger ut koden så här:

<a href="#" onClick="">Till sidan Adressen</a>

Händelsehanteraren skall alltså köra ett JavaScript. Detta ser i grunden ut så här:

parent.ramnamnet.location='http://www.sidan.se';

Observera att vi sätter enkla citationstecken runt url:en och att det skall finnas ett semikolon i slutet av raden.

Låt oss säga att vi skall öppna två sidor som heter uppsida.html respektive nedsida.html. Själva javaskriptet kommer då att se ut så här:

parent.toppen.location='uppsida.html';
parent.botten.location='nedsida.html';

Här är "toppen" och "botten" namnen på ramarna där sidorna skall öppnas. Och nu bygger vi ihop skriptet med länkkoden ovan. Det här blir resultatet:

<a href="#" onClick="
parent.toppen.location='uppsida.html';
parent.botten.location='nedsida.html';
">Till sidan Adressen</a>

Vi fortsätter att vara noga med var vi använder dubbla respektive enkla citationstecken. Det gör att javaskripttolken förstår var de olika kodavsnitten börjar och slutar.

Nu skall vi bara se till att webbläsaren inte ens försöker tolka länken som pekar på "#". Vi gör det genom att lägga till ytterligare en rad i skriptet:

<a href="#" onClick="
parent.toppen.location='uppsida.html';
parent.botten.location='nedsida.html';
return false;
">Till sidan Adressen</a>

Därmed var det färdigt. Det enda som återstår är att testa skriptet.

SupportData.Net
©