Administreres af:

Af: novicen.dk

Styring af rammer

I HTML er det ikke muligt at skifte mere end en ramme af gangen, når vi arbejder i rammesæt. Med JavaScript bliver det muligt. Vi kan faktisk skifte indholdet i så mange rammer, som vi overhovedet kunne ønske. Forudsætningen er blot, at vi skal have navngivet alle de rammer, hvori vi ønsker at skifte indhold. Vi skal have sat et gyldigt, entydigt NAME (ingen brug af mellemrum, æ, ø, å eller andre specialkarakterer).

 <frameset cols="150,*" border="0" framespacing="0" frameborder="no">
   <frame src="menu.html" name="menu" noresize scrolling="no">
   <frameset rows="50,*" border="0" framespacing="0" frameborder="no">
     <frame src="heading.html" name="heading" noresize scrolling="no">
     <frame src="velkomst.html" name="indhold" noresiz">
   </frameset>
 </frameset>

De muligheder der ligger i HTML's TARGET bliver - tilnærmelsesvis - genbrugt i JavaScript. Og tilnærmelsesvis, fordi de ikke helt fremstår på samme måde og fordi kun de tre er brugt ensartet.

* window.open() vil ikke blive uddybet her.

Ovenstående rammesæt består af en menusektion - gennemgående helt fra top til bund - som er placeret i venstre side af skærmen og hvormed det er muligt at navigere på web-stedet. Højre side af skærmen er opdelt i to rækker, hvoraf den øverste indeholder information om, i hvilken del af web-stedet vi befinder os.

Det vil nu være muligt fra menuen - eller en hvilken som helst anden ramme - at udskifte indholdet i begge de øvrige rammer samtidig. Til den ene ramme opbygger vi en standard HTML henvisning, som fungerer strikt efter bogen:

Vi sørger samtidig for at fjerne "sørgeranden" om henvisningen, når vi bruger Internet Explorer, ved at indsætte hændelsen onfocus="this.blur()".

<a href="side1.html" target="indhold" onfocus="this.blur()">Side 1</a>

Da vi skal have skiftet indholdet i forældrerammens header, indsættes en onClick-hændelse, der gør det muligt for os, at aktivere den anden ramme, som vi skal have skiftet. Skiftet foregår med metoden window.location.href og navigationsvejen frem til rammen bliver - relativt til menuen -parent.header.location.href.

<a href="side1.html" target="indhold"
 onclick="parent.heading.location.href='heading1.html'"
 onfocus="this.blur()">Side 1</a>

Da forældre rammesættet også i dette tilfælde udgør det for top rammesæt vil vi kunne anvende følgende i onClick-hændelsen og stadig få samme resultat: top.heading.location.href='heading1.html'.

Vi bevæger os altså rundt i rammesættet med udgangspunkt i et overordnet fælles fix-punkt. I det beskrevne tilfælde kan anvendes både top og parent. Ud fra det fælles fix-punkt - top eller parent - er navigationsvejen lig med rammenavnene på de enkelte rammer - heading - og afsluttet med location.href='det_nye_filnavn.html'.

I rammen med name="indhold" indsætter vi nu et nyt rammesæt, således at det bliver et rammesæt, der er indsat i et andet rammesæt. Også her vil vi kunne manipulere med samtlige rammer men det er her en forudsætning, at de nye rammer har gyldige, entydige navne - altså navne der ikke er ens med nogle af de i første rammesæt indsatte navne.

<frameset rows="*,45" border="0" framespacing="0" frameborder="no">
  <frame src="velkomst.html" name="nytindhold" noresize>
  <frame src="footer.html" name="footer" noresize scrolling="no">
</frameset>

Den nye fremtoning af vores rammesæt er med tre rammer opsat i rækker i højre del af skærmen. Fra menuen skal vi nu foretage skift af alle tre rammer ved klik på samme link. Igen opsætter vi en almindelig standard <A...> TAG hvorefter vi indsætter de nødvendige hændelser. Først onfocus.

<a href="heading1.html" target="heading"
 onfocus="this.blur()">Skift inderste bund, nyt indhold og yderste header</a>

I onclick-hændelsen skal vi have indsat udskiftning af begge de resterende rammer, hvilket vi kan gøre, ved at adskille de enkelte JavaScript kommandoer med et ; (semikolon). Begge kommandoer vil - som ovenfor - kunne starte med både top og parent. Derefter indsættes navnene på de enkelte rammer efter tur og afslutningsvis med metoden for visning af ny fil. Eks.: parent.indhold.nytindhold.location.href='side1.html' og tilsvarende kommando for bundrammen. Samlet giver vores link følgende kode:

<a href="heading1.html" target="heading"
 onclick="parent.indhold.footer.location.href='footer1.html';
 parent.indhold.nytindhold.location.href='side1.html'"
 onfocus="this.blur()">Skift inderste bund, nyt indhold og yderste header</a>

Det skal påses - når vi arbejder med rammer i rammer - at de link som oprettes, også i alle tilfælde vil være gyldige. Hvis du eksempelvis forsøger at indlæse indhold i rammer, som ikke vises i browseren, fordi det rammesæt de tilhører ikke er indlæst, så vil browseren angive, at der er fejl på siden. Du kan eksempelvis forsøge at skifte de to rammer i ovenstående eksempel før du har indlæst rammesættet i rammen "indhold" - det vil så fremgå, at der er fejl på siden.