Hoofdstuk 16: Javascript en PHP

16.4 Frames, windows

16.4.1 Het window-object

Als je de opdracht document.href="url" gebruikt wordt er een nieuwe pagina in het huidige venster geopend, en dan is de vorige pagina verdwenen.
De opdracht window.open("url") doet precies hetzelfde.
Maar met de opdracht window.open kun je er ook voor zorgen dat er een nieuw venster wordt geopend, terwijl het vorige ook blijft staan.
Je kunt dan van het venster zelf een aantal dingen instellen.
Algemeen ziet de code er als volgt uit:

window.open('bestandsnaam.html', 'naam_van_het_venster', 'attributen')

Je kunt o.a. de volgende attributen gebruiken:

height="100"	hoogte van het venster in pixels
width="200"	breedte van het venster in pixels
height=screen.height	hoogte van het venster is gelijk aan de hoogte van het scherm (de totale hoogte inclusief de taakbalk enz)
height=screen.availHeight	hoogte van het venster is gelijk aan de hoogte van het scherm (de hoogte exclusief de taakbalk enz)
width=screen.width-100	breedte van het venster is gelijk aan de hoogte van het scherm - 100
screenX="100"	linkermarge van het venster
screenY="400"	bovenmarge van het venster
resizable="no"	de venster-grootte kan niet worden aangepast
scrollbars="yes"	wel schuifbalken
toolbar="no"	werkbalk niet zichtbaar boven in je browserscherm
menubar="yes"	menubalk wel zichtbaar
titlebar="no"	titelbalk niet zichtbaar
status="no"	geen statusbalk onderin je scherm
location="yes"	de URL wordt wel getoond in de adresbalk
directories="no"	geen balk in je browser met directories

Wil je het venster sluiten, dan doe je dat met de opdracht self.close(), tenminste als die code in het document staat waarvan het venster gesloten moet worden.

Het window-object heeft nog meer eigenschappen en methoden, een aantal daarvan zie je in onderstaande tabel:

eigenschap/methode	betekenis
self.name	de naam van het venster, self is het actieve browservenster
top	de naam (synoniem) van het parent venster
window.document	het huidig document in het venster
window.location	de URL van het huidig document
window.close()	sluit het venster
window.opener	het venster waarin het huidige venster is geopend
window.alert(tekst)	toont de tekst in een boodschappenvenster
a = window.confirm(tekst)	toont de tekst in een bevestigingsvenster, met een OK- en een CANCEL-knop. Als er op OK geklikt wordt krijgt a de waarde 1 (true) en anders 0 (false)
window.status = "tekst"	toont de tekst op de statusbalk
a = window.prompt(string1,string2)	Er verschijnt een venstertje met de tekst van string1 er in; en er wordt verwacht dat er iets in het invulvenster wordt ingevoerd, en in dat invulvenster is de inhoud van string2 alvast vermeld De variabele a bevat daarna de inhoud van de ingevoerde tekst
focus()	Zet de focus in het venster, zodat het naar de voorgrond springt.
open(URL, [naam], [attributen])	Opent een nieuw venster, zie hierboven

16.4.2 On-the-fly-documenten

Je kunt m.b.v. JavaScript ook zogenaamde on-the-fly-documenten maken.
Dat betekent dat er een nieuwe pagina wordt getoond, maar de html-code van die pagina staat niet in een html-bestand op de schijf, het wordt door Javascript-code aangemaakt.

Oefening 18

Maak een html-document zoals hieronder, en probeer het uit.

<html>
<head>
<TITLE>Oefening 18 JavaScript </TITLE> <script language="JavaScript" TYPE="text/javascript" >

function nieuwvenster()
{
venster2= open("","nieuw","width=500,height=400,status=yes,toolbar=no,menubar=no");

// open het document voor bewerking
venster2.document.open();

// maak het document
venster2.document.write("<html><head><title>On-the-fly");
venster2.document.write("</title></head><body>");
venster2.document.write("<font color='#0000FF'><H1>");
venster2.document.write("Dit HTML-document is gemaakt met JavaScript");
venster2.document.write("</H1> </font> ");
venster2.document.write("<form>");
venster2.document.write("<INPUT type='button' VALUE='sluiten' onClick='self.close()';>");
venster2.document.write("</form>");
venster2.document.write("</body></html>");

// sluit het document af voor bewerking (het venster wordt niet gesloten !)
venster2.document.close();
}
</script>
</head>
<body>
Klik op de button als je het nieuwe venster wilt openen;<BR>

<form>
<input type=button value="Open een on-the-fly venster" onClick="nieuwvenster()">
</form>

</body>
</html>

Uitleg:

De functie waar het om gaat heet nieuwvenster()
De eerste opdracht van die functie venster2= open("","nieuwvenster" enz) zorgt er voor dat er een nieuw venster wordt geopend.

Het eerste argument is een lege string ""
Dat betekent dat we geen URL aangeven, want er moet geen bestaand document worden geladen.

Nadat we het venster geopend hebben moeten we het document openen.
Dit gebeurt d.m.v. de opdracht venster2.document.open();
Denk er om dat open() methode van het document-object een andere methode is dan de open() methode van het windows-object.
Dit commando zorgt er voor dat we het document aan kunnen maken.

In de volgende regels worden de regels van het document m.b.v. de opdracht document.write( ) gemaakt.

En als dat is gebeurd moeten we het document weer sluiten, want dan pas kan het getoond worden.
Dat sluiten gebeurt m.b.v. de volgende code: venster2.document.close();

Denk er wel om dat de tekst, die moet worden afgedrukt met document.write( ) tussen aanhalingstekens moet worden gezet. Maar als in die tekst ook nog weer aanhalingstekens voorkomen dan kan de browser in de war raken van al die aanhalingstekens. Gebruik dan dubbele aanhalingstekens ( " ) voor het begin en einde van de tekst, en enkele aanhalingstekens ( ' ) voor de rest.
( Zie de regel venster2.document.write("<INPUT type='button' VALUE='sluiten' onClick='self.close()';>"); )

Denk er ook om dat het sluiten van het document ( venster2.document.close(); ) een andere betekenis heeft dan het sluiten van het window (onClick='self.close()').
In het eerste geval betekent het dat het document klaar is in het geheugen, er wordt niets meer aan toegevoegd.
In het tweede geval betekent het dat het venster wordt afgesloten, het verdwijnt van het scherm.

Waarden meegeven naar een on-the-fly-venster

Als je een waarde in het hoofdvenster hebt ingevoerd, en je wilt dat daar iets mee gebeurt in het on-the-fly-venster, dan moet dat wel op een speciale manier.
Als je de waarde in het hoofdvenster m.b.v. van een variabele hebt vastgelegd (bijv. m.b.v. var getal = 22), dan kun je die variabele in het on-the-fly-venster niet zonder meer gebruiken.
Die variabele hoort bij het window-object van het hoofdvenster, en niet bij het window-object van het on-the-fly-venster.
Als die variabele in een tekstvenster is ingevoerd in het hoofdvenster, en de naam van het formulier is form1 en de naam van het tekstvenster is tekst1, dan kun je die waarde in het hoofdvenster opvragen m.b.v.
window.document.form1.tekst1.value
maar in het on-the-fly-venster moet je het opvragen m.b.v.
window.opener.document.form1.tekst1.value

Verder heb je bij het maken van een on-the-fly-venster in de Javascript-opdrachten ook weer Javascript-opdrachten, en dan krijg je te maken met opdrachten zoals:
venster2.document.write("document.write(a)' + '</script>'");

Dan moet je er om denken dat de binnenste aanhalingstekens andere zijn dan de buitenste aanhalingstekens.
Maar dan nog krijg je vaak foutmeldingen door de vele haakjes en aanhalingstekens en slashes en backslashes.

Je kunt het dan beter splitsen op de volgende manier:
var output = 'document.write(a)' + '<\/script>'
venster2.document.write(output+'\n');
Denk er om dat in dit geval voor het slash-teken / het zogenaamde ontsnappingsteken \ gezet moet worden.
Denk er ook om dat je + '\n' toevoegt, dat heeft tot gevolg dat de volgende Javascript-opdracht in het html-document van het on-the-fly-venster op een nieuwe regel begint.

Oefening 19

Maak een html-document zoals hieronder, en probeer het uit.

<html>
<head>
<TITLE>Oefening 19 JavaScript </TITLE> <script language="JavaScript" TYPE="text/javascript" >

function nieuwvenster()
{
venster2= open("","nieuw","width=500,height=400,status=yes,toolbar=no,menubar=no");
venster2.document.open();
venster2.document.write("<html><head><title>On-the-fly</title>\n");
venster2.document.write("<script language='Javascript' TYPE='text/javascript'>\n");
output = "var a= window.opener.form1.getal.value;"
venster2.document.write(output+'\n');
var output = "document.write('Het ingevoerde getal is ')";
venster2.document.write(output+'\n');
output = 'document.write(a)' + '<\/script>'
venster2.document.write(output+'\n');
venster2.document.write("</head><body>");
venster2.document.write("<br><br>Dit is een on-the-fly-document");
venster2.document.write("</body></html>");
venster2.document.close();
}
</script>
</head>
<body>
<form name = "form1">
Vul hier een getal in: <input type=text name="getal" ><br><br>

Klik op de button om een nieuw venster te openen waar het ingevoerde getal in verschijnt;<BR>

<input type=button value="Open een on-the-fly venster" onClick="nieuwvenster()">
</form>

</body>
</html>

16.4.3 Frames

In hoofdstuk 6 van de cursus HTML hebben we een html-document gemaakt waarmee een aantal frames werden aangemaakt.
Dat ging als volgt:

<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET rows="20%,80%">
<FRAME src="boven.htm" name="boven"> <FRAMESET cols="20%,80%">
<FRAME src="kolom1.htm" name="links">
<FRAME src="kolom2.htm" name="rechts">
</FRAMESET>
</FRAMESET> </HTML>

Het bovenstaande document hebben we opgeslagen onder de naam frame.htm

Verder hebben we nog drie documenten "boven.htm" en "kolom1.htm" en "kolom2.htm" gemaakt.
De code van het document kolom1.htm was als volgt:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Dit zit links</H1>
</BODY<
</HTML>

De andere twee zijn soortgelijke documenten, en als we dan frame.htm in Internet Explorer openen dan zien we het volgende:

Naar het linkerframe verwijzen we in Javascript met de naam window.links, omdat er in het frameset-document de volgende code staat:
<FRAME src="kolom1.htm" name="links" >

We gaan nu een button in het linkerframe zetten, en wel zo dat als je op die button klikt er het volgende gebeurt:

Er verschijnt een prompt-box, waarin om een naam wordt gevraagd.
Daarna verschijnt er een prompt-box, waarin om een kleur wordt gevraagd.
Daarna zal die naam in het rechter frame verschijnen, en de ingevoerde kleur wordt de achtergrondkleur van het document in het rechter frame.

Verander daarvoor kolom1.htm als volgt:

<HTML>
<HEAD>
<script language="JavaScript" TYPE="text/javascript" >

function SchrijfRechts(tekst,kleur)
{
parent.rechts.document.clear();
parent.rechts.document.open();
parent.rechts.document.write("<HTML>");
parent.rechts.document.write("<HEAD></HEAD>");
parent.rechts.document.write("<BODY BGCOLOR=#" + kleur + ">");
parent.rechts.document.write(tekst);
parent.rechts.document.write("</BODY>");
parent.rechts.document.write("</HTML>");
parent.rechts.document.close();
}

function vraag_naam_kleur()
{
var naam = prompt("Wat is je naam?", "");
var k = prompt("Geef een hexadecimale kleur", "FFFF00");
SchrijfRechts(naam, k);
}

</SCRIPT>

</HEAD>
<body>

<form>
<input type="button" value="Schrijf !" onClick="vraag_naam_kleur()">
</form>

</body>
</html>

Uitleg:

Als je op de button met Schrijf ! klikt dan wordt de functie met de naam vraag_naam_kleur() uitgevoerd.
Er wordt dan om een naam en een kleur gevraagd.
En daarna wordt de functie SchrijfRechts(tekst, kleur); uitgevoerd, en wel zo dat tekst de ingevoerde naam bevat, en kleur de ingevoerde kleur k.

De eerste opdracht van die functie is parent.rechts.document.clear();

Met parent wordt de vader van de linkerkolom bedoeld, dat is het document waarin het frame is gedefinieerd.
En rechts is de naam van het rechter frame, dat is een subobject van het parent-frame.
Als je parent weglaat gaat het mis, want het frame rechts is geen subobject van het frame rechts.
Het document, dat in het rechter frame zit wordt dus gewist.
Daar merk je niets van, behalve als je er voor zorgt dat er een nieuw html-document in het geheugen komt.
Daarvoor moet je eerst het document, dat dan leeg is, weer openen.
Dit gebeurt d.m.v. de opdracht parent.rechts.document.open();
Dit commando zorgt er voor dat we het document aan kunnen maken.

In de volgende regels worden de regels van het document m.b.v. de opdracht document.write( ) gemaakt.

En als dat is gebeurd moeten we het document weer sluiten, want dan pas kan het getoond worden.
Dat sluiten gebeurt m.b.v. de volgende code:parent.rechts.document.close();

Twee documenten tegelijk laden.

In de volgende oefening zie je hoe je in twee frames tegelijk een nieuw document kunt laten verschijnen.

Oefening 20

Zorg er voor dat je de documenten zoals hierboven met de namen frame.htm, boven.htm en kolom2.htm hebt.
Maak het html-document kolom1.htm zoals hieronder, en probeer het uit.

<HTML>
<HEAD>
<TITLE>Oefening 20 JavaScript </TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" >
function Laadtwee(Bestand1,Bestand2)
{
parent.links.location = Bestand1;
parent.rechts.location = Bestand2;
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="JavaScript:Laadtwee('file1.htm','file2.htm')">Laad file1 en file2 !</A> </BODY>
</HTML>

Uitleg:

De opdracht parent.links.location = Bestand1; heeft hetzelfde gevolg als de opdracht window.open(Bestand1,'links');
Met parent wordt de vader van het frame links bedoeld, dat is het document waarin het frame is gedefinieerd.
Je kunt ook zeggen dat het frame links het kind (ook wel child genoemd) is van het totale frameset-venster.

Je ziet dat er in de functie parameters Bestand1 en Bestand2 worden gebruikt.
Dat heeft tot gevolg dat als de functie als volgt wordt aangeroepen: Laadtwee('file1.htm','file2.htm') de documenten file1.htm en file2.htm worden ingelezen.