Meerdere frames vervangen met Javascript
Algemeen wordt het afgeraden om frames te gebruiken in je website. Het grootste argument is dat het niet goed is voor de zoekmachines. Maar wat als je nu toch frames gebruikt en je wil dat er meerdere frames vervangen worden als de gebruiker op 1 link klikt. Standaard heeft (x)Html daar geen methode voor waarmee je dit kan realiseren. Gelukkig heb je Javascript hiervoor.
Stel dat dit de structuur van onze site is: 
Zoals je ziet hebben we 4 frames namelijk “header”, “footer”, “menu” en “inhoud”. Stel nu dat we een link hebben in het frame “menu” en dat we willen dat daardoor de andere 3 frames veranderen. Hiervoor gaan dit Javascriptje gebruiken:
<script> function veranderframe(pagina1,pagina2,pagina3) { parent.header.location.href = pagina1; parent.footer.location.href = pagina2; parent.inhoud.location.href = pagina3; } </script>
Dit is redelijk simpele Javascript code. Vooraleer ik de werking ervan ga uitleggen, moet je weten hoe we het aanroepen. Een voorbeeld van een link in “menu” die alle 3 de andere frames vervangt, is zoiets:
<a href="javascript: veranderframe('http://www.hoedoejedat.be', 'http://www.yahoo.com/', 'http://www.google.com')">Klik</a>
Zoals je ziet, roepen we in de link dit aan:
javascript:veranderframe('http://www.hoedoejedat.be', 'http://www.yahoo.com/', 'http://www.google.com')
Dit wil dus zeggen dat hij de functie veranderframe() moet starten met de 3 gegeven parameters. In dit geval zijn dit de adressen van 3 websites namelijk Hoedoejedat.be, Yahoo en Google.
Zoals ik al zei, start hij dus de functie veranderframe(). In de functie veranderframe() treft hij 3 regels code die redelijk goed op elkaar lijken. De eerste regel die hij aantreft is:
parent.header.location.href = pagina1;
Wat Javascript doet, is eerst het object “parent” openen. Dit object is eigenlijk het overkoepelende object van je site (en dus ook van je frames). Hij opent dan het object “header”. Zoals je zal zien aan de structuur van onze site (zie afbeelding bovenaan), is dit de naam van 1 van onze frames. Hij opent dus het frame “header”. Tenslotte, zeggen we door middel van “location.href” dat de inhoud van dat frame, de link “pagina1″ moet zijn. Wat is “pagina1″? Wel, dat is 1 van de parameters die we hebben meegegeven met de functie veranderframe(). In dit geval is dat “http://www.hoedoejedat.be”.
Hetzelfde principe schuilt achter de volgende 2 regels code die hij aantreft. Nadat hij deze 2 regels code ook heeft doorlopen, zal de inhoud van je frames veranderd zijn. Maar wat als je frames nu niet “header”, “footer” en “inhoud” genoemd zijn? Heel simpel, dan vervang je gewoon in die 3 regeltjes code van de functie veranderframe() de namen “header”, “footer” en “inhoud” door je eigen namen die je gegeven hebt. Deze namen zijn de name=”"-attributen die je hebt gedefinieerd bij het aanmaken van je frames.
Tenslotte wil ik nog dit zeggen: niemand houdt je tegen om deze code ook te gebruiken voor 2 frames, 4 frames of zelfs 10 frames in een keer te kunnen vervangen. Het principe blijft hetzelfde, zolang dat je maar 1 regel code hebt per frame en dat je de parameters goed aanpast. Het is slechts een kwestie van wat trial and error. Dankzij deze kleine code, kan je makkelijk verschillende frames tegelijk vervangen door middel van Javascript.
- Geplaatst op 08/10/2008 door Jeroen Heymans
- Geplaatst in Javascript
- 3,799 views
- Reageren?
