Cursus JavaScript

Frames

Creatie van frames

Een veel gestelde vraag gaat over de samenwerking van Javascript met frames. Eerst en vooral wil ik uitleggen wat frames zijn en waarvoor we ze kunnen gebruiken.
Het venster van onze browser kunnen we opdelen in verschillende frames. Met een frame bedoelen we een vierkant gedeelte binnen ons browser venster. Elk frame toont zijn eigen document. Zo kunnen we bijvoorbeeld ons scherm opdelen in twee frames. In het eerste frame laden we de homepage van het bedrijf waarvoor we werken en in het tweede frame laden we onze eigen Homepage.
Alhoewel de creatie van frames een puur HTML-probleem is, wil ik hier toch de basis van het werken met frames uitleggen. Om een pagina op te zetten met frames hebben we twee tags nodig nl.: <frameset> en <frame>. Een HTML-pagina die twee frames aanmaakt kan er als volgt uitzien:

<html>
<frameset rows="50%,50%"> 
  <frame src="pagina1.htm" name="frame1"> 
  <frame src="pagina2.htm" name="frame2"> 
</frameset> 
</html>

Dit zal ons twee frames opleveren. We maken hier gebruik van de rows property in de <frameset> tag. Dit betekent dat de twee frames boven elkaar liggen. In het bovenste frame laden we de HTML-pagina pagina1.htm en in het onderliggende frame tonen we het document pagina2.htm. Een druk op de knop toont het resultaat:

Als we het scherm verticaal in twee willen verdelen dan hadden we cols gebruikt ipv rows in de <frameset> tag. Het gedeelte "50%,50%" bepaalt de verhouding tussen de twee frames. We hadden ook "50%,*" kunnen schrijven als we niet willen berekenen hoe groot het tweede frame moet zijn om 100% te bekomen. We kunnen ook de grootte van een frame uitdrukken in pixels door het %-teken niet te vermelden.
Ieder frame krijgt een unieke naam dmv de name property in de <frame> tag. Deze naam zullen we gebruiken om toegang te krijgen tot dat frame binnen JavaScript.

We kunnen ook verschillende <frameset> tags nesten. Volgend voorbeeld toont het gebruik van geneste frames :

<frameset cols="50%,50%"> 
  <frameset rows="50%,50%"> 
    <frame src="frame.htm"> 
    <frame src="frame.htm"> 
  </frameset> 
  <frameset rows="33%,33%,33%"> 
    <frame src="frame.htm"> 
    <frame src="frame.htm"> 
    <frame src="frame.htm"> 
  </frameset> 
</frameset>

Laat ons even het resultaat bekijken:

We kunnen de dikte van de rand aanpassen dmv de border property in de <frameset> tag. border=0 betekent dat we geen boord wensen te zien. Let op : dit werkt niet met Netscape versie 2.x.

Frames en JavaScript

Nu gaan we eens bekijken hoe Javascript de verschillende frames in ons browservenster ziet. Hiervoor gaan we twee frames creeren zoals we gezien hebben in ons eerste voorbeeld.
We hebben gezien dat Javascript alle elementen van een webpagina organiseert in een hierarchie. Dit geldt ook voor frames. Het volgende schema toont de hierarchie in ons eerste voorbeeld:

Aan de top van de hierarchie hebben we ons browser venster. Dit venster wordt opgedeeld in twee frames. Het venster is de ouder in deze hierarchie en de twee vensters zijn de kinderen. We geven de twee frames een unieke naam nl. frame1 en frame2. Aan de hand van deze namen kunnen we informatie uitwisselen tussen de twee frames.
Met een script kunnen we volgend probleem oplossen: De gebruiker klikt op een hyperlink in het eerste frame - maar de pagina moet geladen worden in het tweede frame en niet in het eerste frame. Dit kunnen we bijvoorbeeld gebruiken om een menubalk (of navigatiebalk) te maken waar een frame altijd aanwezig is en de mogelijkheid geeft te navigeren binnen dezelfde website.
Wat betreft de interactie tussen de verschillende frames kunnen we drie gevallen onderscheiden:

parent window/frame ---> child frame
child frame ---> parent window/frame
child frame ---> andere child frame

Vanuit het standpunt van ons venster zijn er twee frames gekend nl. frame1 en frame2. In bovenstaand schema zien we dat er een directe verbinding is tussen het browser venster en beide frames. Als we nu vanuit ons browser venster - de pagina die de twee frames beheert - toegang willen krijgen tot de onderliggende frames dan kunnen we dit eenvoudigweg dmv hun naam bijvoorbeeld:

frame2.document.write("Een boodschap van het browser venster.");

Soms zullen we vanuit een frame informatie naar ons browser venster willen sturen. Dit is bijvoorbeeld nodig indien we de frames willen verwijderen. Verwijderen van frames betekent het laden van een nieuwe pagina ipv de pagina die de frames opzette. Dit is in ons geval de pagina in het parent window. We kunnen toegang krijgen tot het parent window (of parent frame) vanaf de child frames via parent. Om een nieuw document te laden moeten we een nieuwe URL toekennen aan location.href. Als we de frames willen verwijderen dan moeten we het location-object van het parent window wijzigen. Zoals we eerder gezien hebben kan in elk frame een pagina geladen worden en hebben we dus ook een location-object per frame. We laden een nieuwe webpagina in ons parent window dmv volgend commando:

parent.location.href= "http://...";

Zeer dikwijls zullen we toegang willen krijgen vanuit een frame naar een ander frame. Hoe kunnen we een commando doorgeven van het eerste frame naar het tweede frame ? In ons schema zien we dat er geen directe verbinding is tussen de twee frames. Dit betekent dat we niet zomaar informatie kunnen sturen naar frame2 vanuit frame1 want dit frame kent niet eens het bestaan van het tweede frame. Vanuit het standpunt van het parent window is het frame gekend als frame2 en het parent window heet parent gezien vanuit het eerste frame. Aldus kunnen we naar het document-object van het tweede frame schrijven:

parent.frame2.document.write("Hallo, dit is een boodschap van frame1.");

Navigatiebalken

Laat ons eens kijken naar een navigatiebalk. We wensen meerdere links in een frame. Indien de gebruiker klikt op een van de links dan zal de nieuwe webpagina niet verschijnen in het huidige frame maar wel in het tweede frame ernaast.

Hier volgt ons voorbeeld:

Eerst en vooral hebben we een script nodig om de frames op te zetten. Dit document lijkt op het eerste voorbeeld in dit deel:

frames3.htm

<html>
<frameset rows="80%,20%"> 
  <frame src="start.htm" name="main"> 
  <frame src="menu.htm" name="menu"> 
</frameset> 
</html>

De start.htm pagina is onze homepage die we tonen in het main frame bij het laden van onze webpagina. Er zijn geen speciale vereisten voor deze pagina.
De volgende pagina wordt geladen in het frame menu:

menu.htm

<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function load(url) {
  parent.main.location.href= url;
}

// -->
</script>
</head>
<body>

<a href="javascript:load('een.htm')">first</a>
<a href="twee.htm" target="main">twee</a>
<a href="drie.htm" target="_top">drie</a>

</body>
</html>

Hier zien we de verschillende manieren om een pagina te laden in het frame main. De eerste link gebruikt de functie load(). Laten we even kijken hoe we die functie oproepen :

<a href="javascript:load('een.htm')">een</a>

We zien hier dat we onze browser JavaScript code kunnen laten uitvoeren ipv het laden van een andere pagina - we moeten enkel het woord javascript: gebruiken in de href property. We zien ook dat we 'een.htm' schrijven tussen de ronde haken. Dit is de string die we doorgeven aan de functie load(). De functie load() is gedefinieerd als volgt:

function load(url) {
  parent.main.location.href= url;
}

Hier zien we dat we url schrijven tussen de ronde haken. Dit betekent dat de string 'een.htm' gestockeerd is in de variable url. In de load() functie kunnen we deze variabele verder gebruiken. Verder in de cursus zullen we nog meer voorbeelden zien waarbij we variabelen doorgeven naar Javascript-functies.
De tweede link gebruikt de target property. Eigenlijk is dit geen JavaScript. Dit behoort tot standaard HTML. Hierbij moeten we enkel de naam van het frame vermelden. Merk ook op dat we parent niet moeten vermelden voor de naam van het frame. Dit kan misschien een beetje verwarrend zijn. De reden hiervoor is dat target HTML is en geen JavaScript.
De derde link toont ons hoe we de frames verwijderen dmv de target property.
Indien we de frames willen verwijderen dmv de load() functie dan volstaat het parent.location.href= url te schrijven binnen een functie.

Zo, welke methode zullen we gebruiken? Dit hangt af van de webpagina en wat we er verder mee willen aanvangen. De target property is zeer simpel. We kunnen ze gebruiken indien we een pagina willen laden in een ander frame. De JavaScript oplossing (d.i. de eerste link) wordt normaal gebruikt indien we meerdere dingen willen doen als reactie op een klik op een link. Een veel voorkomend probleem is : hoe laad ik tegelijkertijd twee pagina's in twee verschillende frames? Alhoewel we dit ook met de target property kunnen oplossing ligt het toch meer voor de hand om hier een Javascript-functie te gebruiken. Laat ons veronderstellen dat we drie frames hebben nl. frame1,frame2 en frame3. De gebruiker klikt op een hyperlink in frame1. Vervolgens wensen we twee verschillende pagina's te laden in de twee andere frames. We kunnen hiervoor volgende functie schrijven:

function laadtwee() {
  parent.frame1.location.href= "een.htm";
  parent.frame2.location.href= "twee.htm";
}

Als we de functie meer flexibel willen maken dan kunnen we de twee url's doorgeven als parameters aan de functie. Dit ziet er als volgt uit:

function laadtwee(url1, url2) {
  parent.frame1.location.href= url1;
  parent.frame2.location.href= url2;
}

Aldus kunnen we de functie gebruiken als volgt laadtwee("een.htm", "twee.htm") of laadtwee("drie.htm", "vier.htm"). De methode (doorgeven van variabelen) kunnen we in verschillende contexten gebruiken en maakt het werken met functies uitermate krachtig..

[vorig hoofdstuk] [inhoud] [volgend hoofdstuk]

Site monitored
by