Handleiding HTML - JavaScript

JS		Frames

Handleiding HTML Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin

JavaScript wordt veel gebruikt in combinatie met documenten met frames. De bekendste toepassing is wel het gelijktijdig vervangen van documenten in meerdere frames. Een andere is het voorkomen dat je eigen site geopend wordt in een frame van iemand anders.

In dit onderdeel worden enkele voorbeelden van scripts in combinatie met frames gegeven:

Meerdere frames tegelijk updaten
Meerdere keren frames tegelijk updaten
Ander frame updaten bij openen document
Document openen in volledig venster
Document niet buiten frames openen

De voorbeelden werken correct in Netscape Navigator 3.0 en hoger en Microsoft Internet Explorer 4.0 en hoger. Met de eerste drie voorbeelden hebben Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 soms problemen (zie de toelichting bij de voorbeelden).

Zorg dat je het bekijken van je site niet afhankelijk maakt van JavaScript. Lang niet elke bezoeker zal JavaScript gebruiken en daarom is het belangrijk dat de site ook goed bekeken kan worden zonder het updaten van frames met behulp van JavaScript.

Meerdere frames tegelijk updaten

Met behulp van JavaScript kun je met één klik op een hyperlink twee frames tegelijkertijd updaten. Dat is vooral handig wanneer je niet de inhoud van alle frames van een frameset wilt wijzigen, of wanneer het gaat om frames die niet tot hetzelfde frameset behoren.

Bekijk eerst het voorbeeld in een nieuw venster.

Uitgangspunt is een document met twee framesets, waarin de frames de namen links, rechtsboven en rechtsonder hebben:

<FRAMESET COLS="*,3*"> <FRAME SRC="voorbeeld-1a.html" NAME="links"> <FRAMESET ROWS="*,*"> <FRAME SRC="voorbeeld-1b.html" NAME="rechtsboven"> <FRAME SRC="voorbeeld-1c.html" NAME="rechtsonder"> </FRAMESET> </FRAMESET>

De hyperlink in het voorbeeld is als volgt opgebouwd:

<A HREF="geenscript.html" onclick="FrameUpdate(); return false;">Update twee frames</A>

In plaats van "geenscript.html" in het HREF attribuut kun je het beste de URI opnemen van het document, dat je wilt openen als de browser van de bezoeker geen JavaScript ondersteunt. Zonodig voeg je dan ook het TARGET attribuut toe. De toevoeging "return false" aan de onlick event handler zorgt ervoor, dat alleen het script wordt uitgevoerd en niet gelijktijdig het in het HREF attribuut opgegeven bestand geopend wordt.

In de head van het document waarin de hyperlink is opgenomen, staat het volgende script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

In dit script wordt gebruik gemaakt van de eigenschap "location.href", welke bepaalt dat het gaat om de volledige URI van het te openen document. De eigenschap "parent.frame_naam" geeft aan in welk frame het document geopend moet worden. Daarbij verwijst "parent" naar het frameset, waarvan het huidige frame (dat wil zeggen het frame waarin de hyperlink staat) deel uitmaakt.

Wanneer het document geopend moet worden in het bovenste frameset in het venster, dan gebruik je "top" in plaats van "parent". Omdat het in het voorbeeld gaat om het bovenste frameset, had de opbouw van het eerste statement in het script er ook als volgt kunnen uitzien:

top.rechtsboven.location.href = "voorbeeld-1d.html";

Wanneer je ook het frame waarin de hyperlink staat wilt updaten, dan gebruik je "self" in plaats van "parent.frame_naam_x". Bijvoorbeeld:

self.location.href = "bestemming";

In plaats van de naam van het frame kun je ook "frames[y]" gebruiken, waarbij "y" het nummer is van het frame. Bij de telling wordt gestart bij "0" en de volgorde aangehouden, waarin de frames zijn gedefinieerd. In het voorbeeld is "frames[0]" het frame met de naam "links" en zijn de frames "rechtsboven" en "rechtsonder" respectievelijk "frames[1]" en "frames[2]". Het script kun je dus ook als volgt opbouwen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Een script als in het voorbeeld kun je ook gebruiken, wanneer meer dan twee frames tegelijk gewijzigd moeten worden. Voor drie frames bijvoorbeeld is de opbouw van het script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

In plaats van "frame_naam_x" neem je de naam op van het frame, waarin het document geopend moet worden en in plaats van "bestemming_y" het pad en de bestandsnaam van het te openen document.

De hier beschreven oplossing voor het updaten van meerdere frames tegelijkertijd werkt probleemloos in Netscape Navigator 3 en hoger en in Microsoft Internet Explorer 4 en hoger. In Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 wordt het script alleen goed uitgevoerd, indien de in een frame te openen documenten steeds in dezelfde directory staan. Nadat via het script eenmaal documenten uit een andere directory geopend zijn, geeft de browser bij het vervolgens openen van documenten uit de eerste of een nog andere directory de foutmelding dat het bestand niet gevonden wordt. Dat gebeurt ook als je in een volgende document hetzelfde script gebruikt. Een oplossing kan zijn als bestemming niet alleen een pad en bestandsnaam op te nemen, maar een complete URI. Bijvoorbeeld:

parent.rechtsboven.location.href = "https://www.handleidinghtml.nl/javascript/voorbeeld-1d.html";

Nadeel van een complete URI is dat je de site niet meer offline kunt bekijken. Als je dat toch wilt en het niet mogelijk is alle documenten in dezelfde directory te plaatsen, dan kun je er als alternatief ook voor zorgen dat Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 het script niet uitvoeren. Je doet dat door het script eerst te laten controleren welke browser gebruikt wordt en vervolgens de opdracht alleen te laten uitvoeren wanneer het gaat om Netscape Navigator 3 en hoger of Microsoft Internet Explorer 4 en hoger. Het controleren doe je op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen.

Voor het updaten van twee frames ziet het script er nu als volgt uit:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Meerdere keren frames tegelijk updaten

Wanneer je vanuit één document meerdere keren de inhoud van twee frames tegelijkertijd wilt updaten, dan is het handig om de URL's niet in het script te plaatsen, maar in de hyperlinks. Je voorkomt daarmee dat je voor elke link een script moet opnemen.

Bekijk eerst het voorbeeld in een nieuw venster.

Uitgangspunt is weer een document met twee framesets, waarin de frames de namen links, rechtsboven en rechtsonder hebben:

<FRAMESET COLS="*,3*"> <FRAME SRC="voorbeeld-2a.html" NAME="links"> <FRAMESET ROWS="*,*"> <FRAME SRC="voorbeeld-2b.html" NAME="rechtsboven"> <FRAME SRC="voorbeeld-2c.html" NAME="rechtsonder"> </FRAMESET> </FRAMESET>

De hyperlinks zijn als volgt opgebouwd:

<A HREF="geenscript1.html" onclick="FrameUpdate('voorbeeld-2d.html', 'voorbeeld-2e.html'); return false;">Update twee frames</A>

<A HREF="geenscript2.html" onclick="FrameUpdate('voorbeeld-2f.html', 'voorbeeld-2g.html'); return false;">Update de frames opnieuw</A>

In plaats van "geenscriptx.htm" in het HREF attribuut kun je het beste de URI's opnemen van de documenten, die je wilt openen als de browser van de bezoeker geen JavaScript ondersteunt. Zonodig voeg je dan ook het TARGET attribuut toe. De toevoeging "return false" aan de onlick event handler zorgt ervoor, dat alleen het script wordt uitgevoerd en niet gelijktijdig het in het HREF attribuut opgegeven bestand geopend wordt.

In de head van het document waarin de hyperlinks staan opgenomen, staat het volgende script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Uiteraard kun je ook meer dan twee frames tegelijk updaten. Voor drie frames bijvoorbeeld is de opbouw van het script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

In plaats van "frame_naam_x" neem je de naam op van het frame, waarin het document geopend moet worden.

Voor een bijbehorende hyperlink is de opbouw:

<A HREF="geenscript.htm" onclick="FrameUpdate('bestemming_1', 'bestemming_2', 'bestemming_3'); return false;">Omschrijving link</A>

In plaats van "bestemming_x" neem je het pad en de bestandsnaam op van het te openen document.

Om foutmeldingen te voorkomen wanneer de andere frames niet aanwezig zijn (bijvoorbeeld indien het document waarin de linken staan geopend is in het volledige venster), is het verstandig te laten testen of een frameset bestaat en bijvoorbeeld de naam van één frame overeenkomt.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Zorg er voor dat de code tussen de haakjes achter het if-statement niet onderbroken wordt door een harde overgang naar de volgende regel.

Ook bij dit voorbeeld speelt dat Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3/3.5 een foutmelding geven als de in een bepaald frame te openen documenten niet steeds in dezelfde directory staan. Het kan daarom nodig zijn, net als in het vorige voorbeeld, de werking van het script afhankelijk te maken van de gebruikte browser. De browsertest doe je op basis van het algemene script, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen.

Het script voor het updaten van frames krijgt nu de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Ander frame updaten bij openen document

Wanneer je bij het openen van een document in een frame altijd gelijk een ander frame uit hetzelfde frameset wilt updaten, moet je in de head van het document het volgende script opnemen.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

In plaats van "frame_naam" neem je de naam op van het frame, dat je wilt updaten en in plaats van "bestemming" het pad en de bestandsnaam van het document, dat in het te updaten frame geopend moet worden:

Bekijk het voorbeeld in een nieuw venster.

Om foutmeldingen te voorkomen wanneer het andere frame niet aanwezig is (bijvoorbeeld indien het document geopend wordt in het volledige venster), is het verstandig te laten testen of een frameset bestaat en de naam van het frame overeenkomt.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Zorg er voor dat de code tussen de haakjes achter het if-statement niet onderbroken wordt door een harde overgang naar de volgende regel.

Gezien de problemen die Netscape Navigator 2, Microsoft Internet Explorer 3 en Opera 3 hebben met het openen van documenten die zich niet steeds in dezelfde directory bevinden (zie een eerder voorbeeld), kan het nodig zijn de werking van het script afhankelijk te maken van de gebruikte browser. De browsertest doe je op basis van het algemene script, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen.

Het script voor het updaten van een ander frame krijgt nu de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Document openen in volledig venster

Wanneer je zelf in je documenten hyperlinks opneemt, kun je met behulp van het TARGET attribuut aangegeven of het document in een frame (en zo ja welk), in het volledige venster, of in een nieuw venster geopend moet worden. Als iemand anders een link naar een document van jou opneemt, heb je er geen controle over hoe deze geopend worden: in het volledige venster, of in een frameset van die ander. Door een klein JavaScript in de head je document op te nemen, kun je voorkomen dat het document in een frameset van een ander komt. Getest wordt hoeveel frames er zijn in het venster, waarin het document geopend wordt. Als dit aantal ongelijk is aan "0", dan wordt het document in het volledige venster geopend.

Bekijk het voorbeeld.

In de head van je document plaats je het volgende script:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

In het document dat je in het volledige venster laat openen, kun je zelf overigens gewoon weer framesets definiëren.

Document niet buiten frames openen

Soms gebruik je documenten, bijvoorbeeld in een navigatieframe, waarvan je niet wilt dat ze geopend worden in een volledig venster. In dat geval kun je het onderstaande script in de head van het document opnemen. In het script wordt getest of het frameset het juiste aantal frames heeft en of het document wel in het juiste frame geopend wordt. Wordt niet aan deze condities voldaan, dan wordt een ander document geopend. Bijvoorbeeld de beginpagina van je site.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

In plaats van "bestemming" neem je het pad en de bestandsnaam van het als vervanging te openen document op en voor "n" het aantal frames waarmee je werkt. In plaats van "y" neem je het nummer van het frame (bij de telling wordt gestart bij "0" en de volgorde aangehouden, waarin de frames zijn gedefinieerd) en "framenaam" vervang je door de naam van het frame.

Inhoud onderdeel | Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin