Ramar och javaskript 2

Nästa steg blir att byta innehållet i två ramar samtidigt, genom att klicka på en enda länk.

Även här kommer vi att behöva en ramsida. Det duger bra med ett likadant ramdokument som i förra avsnittet – nu kallar vi det ramindex2.html.

<HTML>
<HEAD>
<TITLE>Ramar och javaskript</TITLE>
</HEAD>
<FRAMESET cols="200,*" framespacing="1">
<FRAME name="vspalt" src="ramv2.html" marginwidth="0" marginheight="0" scrolling="auto">
<FRAME name="hspalt" src="ramh2.html" marginwidth="0" marginheight="0" scrolling="auto">
</FRAMESET>
</HTML>

De båda sidorna som ramdokumentet ursprungligen skall öppna, är alltså ramv2.html och ramh2.html.

Eftersom vi skall ändra innehållet i båda ramarna, måste vi ha ytterligare två sidor som vi kan öppna. Jag kallar dessa sidor ramv3.html och ramh3.html – det betyder inte så mycket vad som finns på dem.

Ändra HTML-koden i vänster ram – ramv2.html

I den vänstra ramen skall vi lägga skriptet som öppnar sidorna ramv3.html och ramh3.html. Koden till sidan kommer då att se ut så här:

<HTML>
<HEAD>
<TITLE>Ramar och javaskript 2 – byt två ramar från en länk</TITLE>
<SCRIPT language="JavaScript">
<!-- Göm
function bytRamar()
{
parent.vspalt.location="ramv3.html";
parent.hspalt.location="ramh3.html";
}
// Sluta gömma -->
</SCRIPT>
</HEAD>
<BODY>
<P><A href="javascript:bytRamar()">Byt båda ramarna</A></P>
</BODY>
</HTML>

function bytRamar()
Först deklarerar vi funktionen som skall öppna de båda ramarna.

parent.vspalt.location="ramv3.html"; och parent.hspalt.location="ramh3.html";
Sedan talar vi om att i "moderdoklumentets" (parent) vänstra ram (vspalt) vill vi öppna ramv3.html och i den högra ramen ramh3.html.

<A href="javascript:bytRamar()">
I BODY lägger vi en länk som anropar funktionen bytRamar().

Den högra ramen kan innehålla vad som helst – vi kommer inte att göra något i den.

Pröva ramsidan

Stänga två ramar

När vi öppnar ramsidan från den här sidan, kommer två ramar att öppnas i en enda. När vi vill stänga båda dessa ramar och komma tillbaka till den här sidan, duger det inte med history.go.

I stället använder vi en helt vanlig länk som talar om exakt vad det är som skall öppnas och var:

<P><A href="23.html" target="_parent">Stäng båda ramarna</A></P>

© SupportData.Net