JS Nieuw venster openen

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


Soms is het handig om bepaalde informatie niet in het hoofdvenster weer te geven, maar in een (vaak kleiner) nieuw venster. De bezoeker kan dit nieuwe venster openen, door bijvoorbeeld op een knop of een hyperlink te klikken. Het openen van zo'n nieuw venster kun je het beste regelen via een JavaScript, omdat je dan invloed hebt op hoe het nieuwe venster eruitziet. In het JavaScript maak je gebruik van de open-methode, welke de volgende opbouw heeft:

window.open(URL, vensternaam, vensterkenmerken)

URL geeft aan welk document in het nieuwe venster geopend moet worden. De vensternaam kan gebruikt worden in het TARGET attribuut van een hyperlink. De vensterkenmerken bepalen het uiterlijk van het venster.

Voor alle voorbeelden in dit onderdeel geldt, dat de code tussen de haakjes achter window.open niet onderbroken mag worden door een harde overgang naar de volgende regel.

De volgende voorbeelden worden gegeven:


Een kaal of een aangekleed venster

Met behulp van de vensterkenmerken kun je aangeven, hoe een met behulp van JavaScript te openen venster er moet uitzien. De volgende kenmerken kunnen gebruikt worden:

  • width: de breedte van het venster
  • height: de hoogte van het venster
  • menubar: wel of geen menubalk
  • toolbar: wel of geen knoppenbalk
  • location: wel of geen locatiebalk
  • directories: wel of geen directoryknoppen
  • status: wel of geen statusbalk
  • scrollbars: wel of geen schuifbalken
  • resizable: wel of geen mogelijkheid de afmetingen van het venster te wijzigen
  • top: de afstand tussen de bovenrand van het nieuwe venster en de bovenkant van het scherm
  • left: de afstand tussen de linkerrand van het nieuwe venster en de linkerkant van het scherm

Bij de kenmerken "width", "height", "top" en "left" wordt de waarde aangegeven in pixels, bij de overige kenmerken in "yes" of "no". De kenmerken "width" en "height" hebben betrekking op dat deel van het venster, waarin het document wordt weergegeven en zijn dus exclusief de ruimte die bijvoorbeeld menubalken, knoppenbalken en schuifbalken innemen.

De kenmerken "top" en "left" worden alleen door Netscape Navigator 4 en Microsoft Internet Explorer 4 ondersteund.

Als geen van de kenmerken wordt benoemd in het script, wordt een compleet opgetuigd venster geopend in de standaard grootte. Als slechts enkele opties worden benoemd, zoals "width" en " height", wordt voor de overige opties als waarde "no" aangehouden.

In het volgende voorbeeld zijn in het script alleen de kenmerken "width" en " height" benoemd. Er wordt dus een kaal venster weergegeven. Druk op de knop om het venster te bekijken.

In de head van dit document staat het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function NieuwVensterA() {
window.open("voorbeeld-1a.html", "nieuw", "width=300,height=200");
}
//-->
</SCRIPT>

Zorg er voor dat de code tussen de haakjes achter window.open niet onderbreekt door een harde overgang naar de volgende regel.

De knop wordt met een formulier gemaakt, dat in de body van het document is opgenomen. Aan het INPUT element is de onclick event handler toegevoegd (zie het onderdeel Scripts), die ervoor zorgt dat het script wordt uitgevoerd als voor de knop de click gebeurtenis optreedt.

<FORM ACTION="geen_actie">
<INPUT TYPE="button" VALUE="Open venster" onclick="NieuwVensterA()">
</FORM>

Door extra kenmerken toe te voegen, wordt een meer aangekleed venster weergegeven. Klik op de knop om het venster te bekijken.

In de head van dit document staat het volgende script opgenomen:

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

function NieuwVensterB() {
window.open("voorbeeld-1b.html", "nieuw", "width=400,height=250,status=yes,toolbar=yes,location=yes");
}

//-->
</SCRIPT>

De opbouw van de knop is hetzelfde als in het eerste voorbeeld, alleen is de naam van de functie veranderd van NieuwVenster A in NieuwVensterB.

Met de kenmerken "top" en "left" kan in browsers die dit ondersteunen de positie van het nieuwe venster bepaald worden.

In de head van dit document staat het volgende script opgenomen:

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

function NieuwVensterC() {
window.open("voorbeeld-1c.html", "nieuw", "width=300,height=200,top=200,left=50");
}

//-->
</SCRIPT>


Nieuw venster via hyperlink

In de voorgaande voorbeelden is gebruik gemaakt van een knop om het nieuwe venster te openen. Veel vaker zal echter gebruik gemaakt worden van een hyperlink, zoals in het volgende voorbeeld.

In de head van dit document staat het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function NieuwVensterD() {
window.open("voorbeeld-2a.html", "nieuw", "width=300,height=200");
}
//-->
</SCRIPT>

De hyperlink is als volgt opgebouwd:

<A HREF="voorbeeld-2a.html" TARGET="nieuw" onclick="NieuwVensterD(); return false;">hyperlink</A>

De onclick event handler in de hyperlink, zorgt ervoor dat het script wordt uitgevoerd. De toevoeging "return false" aan de onclick event handler bepaalt, dat niet gelijktijdig de normale actie van de hyperlink moet worden uitgevoerd. In het HREF attribuut wordt ook verwezen naar het document, dat in het nieuwe venster geopend moet worden. Het TARGET attribuut heeft als waarde de naam van het venster, zoals dat in het script is gedefinieerd. Het zorgt ervoor dat browsers die JavaScript niet ondersteunen, niet het huidige venster vervangen, maar toch een nieuw (weliswaar standaard) venster openen. Bovendien wordt door het opnemen van het TARGET attribuut voorkomen, dat in browsers die "return false" niet ondersteunen, gelijktijdig het huidige document wordt vervangen en een nieuw venster wordt geopend.

Netscape Navigator 2 ondersteunt bij gebruik van een hyperlink als hiervoor geen kenmerken voor het nieuwe venster, dat daardoor altijd als een volledig nieuw browservenster geopend wordt. Bovendien heeft Netscape Navigator 2 problemen met het openen van nieuwe vensters van een verschillend formaat tijdens één browsersessie: als eenmaal een bepaald formaat venster is geopend, krijgen alle volgende nieuwe vensters dezelfde afmetingen. De voorbeelden hierna kunnen daardoor anders dan bedoeld weergegeven worden.

Klik op deze hyperlink om een nieuw venster te openen.


In de eerder gebruikte voorbeelden is in het script opgenomen, welk document geopend moet worden in het nieuwe venster. Als het openen van een nieuw venster vaker in een document voorkomt, is het niet handig elke keer een nieuw script te gebruiken. Je kunt dan beter gebruik maken van een algemener script en het te openen document specificeren in de onclick event handler in de hyperlink.

In het volgende voorbeeld maken twee hyperlinks gebruik van hetzelfde script:

hyperlink 1   hyperlink 2

In de head van dit document is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function NieuwVensterE(URL) {
window.open(URL, "nieuw", "width=300,height=200");
}
//-->
</SCRIPT>

De hyperlinks hebben de volgende opbouw:

<A HREF="voorbeeld-2b.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2b.html'); return false;">hyperlink 1</A>

en

<A HREF="voorbeeld-2c.html" TARGET="nieuw" onclick="NieuwVensterE('voorbeeld-2c.html'); return false;">hyperlink 2</A>


In plaats van de onclick event handler kan ook gebruik gemaakt worden van de onmouseover event handler. Het nieuwe venster wordt dan geopend als de muisaanwijzer over de hyperlink beweegt.

De volgende afbeelding is opgenomen in een hyperlink. Gebruik wordt gemaakt van hetzelfde script als in de voorbeelden hiervoor.

Handleiding HTML

De hyperlink heeft de volgende opbouw:

<A HREF="voorbeeld-2d.html" TARGET="nieuw" onmouseover="NieuwVensterE('voorbeeld-2d.html'); return false;"><IMG SRC="handleiding-html.gif" WIDTH="84" HEIGHT="27" BORDER="0" ALT="Handleiding HTML"></A>


Nieuw venster op de voorgrond

Als je in een nieuw venster meerdere keren na elkaar een document wilt openen vanuit het hoofdvenster, dan is het niet nodig dat de bezoeker het nieuwe venster steeds sluit. Door te klikken op een volgende hyperlink, wordt de inhoud van het nieuwe venster automatisch ververst. Probleem is wel dat door het klikken in het hoofdvenster, het nieuwe venster op de achtergrond wordt geplaatst. Vanuit de blik van de bezoeker lijkt het klikken daardoor geen effect te hebben. Je kunt dit echter verhelpen met een JavaScript dat er voor zorgt dat het venster op de voorgrond wordt geplaatst. De eenvoudigste manier zou zijn het toevoegen van de onload event handler met de waarde "self.focus()" aan het BODY element van het in het nieuwe venster te openen document. Omdat Netscape Navigator 2 de focus methode niet kent en een foutmelding geeft, is het echter nodig een tussenstap te maken, waarbij het gebruik van de focus-methode voor deze browser wordt uitgesloten. De focus-methode werkt ook niet in Microsoft Internet Explorer 3 en in Opera, maar dit levert geen foutmelding op.

In het volgende voorbeeld, waarin gebruik gemaakt wordt van een eerder beschreven script om het nieuwe venster te openen, kun je bekijken of en hoe het werkt. Klik achtereenvolgens op hyperlink 1, 2 en 3. Het eerste nieuwe venster komt zoals gebruikelijk op de voorgrond, het tweede vind je achter het hoofdvenster en het derde komt als gevolg van de focus-methode weer op de voorgrond.

hyperlink 1   hyperlink 2   hyperlink 3

In de head van het document dat je opent met behulp van hyperlink 3 is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
var NN2 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/2") != -1);

function VensterFocus() {
if (!NN2) {
self.focus();
}
}
//-->
</SCRIPT>

en de activering van het BODY element van dit document heeft de volgende opbouw:

<BODY ... onload="VensterFocus()">


Nieuw venster sluiten

Met JavaScript kun je niet alleen een nieuw venster openen, maar je kunt het ook weer sluiten.

Het nieuwe venster wordt, op een vergelijkbare wijze als bij eerdere voorbeelden, geopend met een hyperlink.

In het document in het nieuwe venster staat in de body een script, dat een hypertext link plaatst. De waarde van het HREF attribuut bevat een JavaScript opdracht, welke ervoor zorgt dat bij klikken het venster wordt gesloten.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
document.write('<A HREF="JavaScript:parent.close()">Sluit</A> dit venster.') //-->
</SCRIPT>

Voor browsers die JavaScript niet ondersteunen, kun je het NOSCRIPT element opnemen:

<NOSCRIPT>Dit is een nieuw venster. Sluit het op de gebruikelijke wijze.</NOSCRIPT>


Wanneer je het nieuwe venster na een bepaalde tijd automatisch wilt laten sluiten, dan moet je het volgende script opnemen in het te openen document:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function SluitVenster() {
setTimeout("Verwijder()",3000);
}

function Verwijder() {
close();
}
//-->
</SCRIPT>

De in de setTimeOut methode in het script opgenomen waarde geeft aan, na hoeveel milliseconden het venster sluit.

Aan het BODY element van het document in het nieuwe venster voeg je onload event handler toe:

<BODY onload="SluitVenster();">
...
</BODY>

Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit.


Als je in een document meerdere keren een pop-up venster gebruikt, kun je het sluiten van het nieuwe venster eenvoudiger regelen via het script, waarmee je het opent.

In de head van dit document is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function OpenSluit(URL) {
venster = window.open(URL, "nieuw", "width=300,height=200");
setTimeout("venster.close()",3000);
}
//-->
</SCRIPT>

Open het nieuwe venster en zie hoe het na 3 seconden automatisch sluit.


Hyperlinks in nieuw venster

Soms wil je in een nieuw venster hyperlinks opnemen, die een document openen in het venster, van waaruit het nieuwe venster geopend is. Je kunt dan gebruik maken van de opener eigenschap, welke ondersteund wordt door Netscape Navigator 3 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger. Door de opener eigenschap bovendien nog eens apart te definiëren in het document, van waaruit het nieuwe venster geopend wordt, kan ook Netscape Navigator 2 er gebruik van maken.
Omdat Opera 3 niet met het script overweg kan, mag het door deze browser niet worden uitgevoerd. Daarom wordt eerst getest om welke browser gaat. Dat gebeurt 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.

Het script in de head van dit document ziet er als volgt uit:

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

var OP3 = (navigator.userAgent.indexOf("Opera/3") != -1) && (navigator.userAgent.indexOf("Mozilla/3") != -1);
var NN2 = (navigator.appName == "Netscape") && (navigator.userAgent.indexOf("Mozilla/2") != -1);

function Index(URL) {
if (OP3) {
alert('Deze mogelijkheid wordt niet door Opera 3 ondersteund.');
}
else {
indexvenster = window.open(URL, "nieuw", "width=300,height=200");
if (NN2) {
indexvenster.opener = self;
}
}
}
//-->
</SCRIPT>

De link waarmee je het venster opent, heeft bijvoorbeeld de volgende opbouw:

<A HREF="JavaScript:Index('voorbeeld-5a.html')">Inhoudsopgave</A>

In het document in het nieuwe venster is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function OpenLink(URL) {
window.opener.location.href = URL;
}
//-->
</SCRIPT>

Een link in het document in het nieuwe venster heeft de volgende opbouw:

<A HREF="JavaScript:OpenLink('js-venster.html#teruglinken')">Hyperlinks in nieuw venster</A>

Open de inhoudsopgave en bekijk hoe het voorbeeld werkt in Netscape Navigator 2 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger.

Wanneer je het nieuwe venster wilt sluiten, nadat op een hyperlink is geklikt, voeg je aan het script in het nieuwe venster "window.close()" toe.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function OpenLink(URL) {
window.opener.location.href = URL;
window.close();
}
//-->
</SCRIPT>

Open de inhoudsopgave en bekijk in Netscape Navigator 2 en hoger, Microsoft Internet Explorer 3 en hoger en Opera 3.5 en hoger hoe het nieuwe venster na het klikken op een hyperlink sluit.

Met de hyperlink waarmee je in dit voorbeeld het nieuwe venster opent, kunnen browsers die JavaScript niet ondersteunen, of waarin JavaScript niet is toegestaan, niets beginnen. Daarom is het misschien verstandig een dergelijke link te verbergen voor die browsers. Dat doe je ook weer met JavaScript:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
indexlink =  "<A HREF=\"JavaScript:Index('voorbeeld-5b.html')\">"
indexlink += "Inhoudsopgave<\/A>"
document.write(indexlink);
//-->
</SCRIPT>


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

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 18 mei 2003