Window openen/sluiten vanuit een ander window
Als je op deze site een link aanklikt naar een andere website dan verschijnt die site in een apart venster (tabblad).
Als je vervolgens op deze site een andere link aanklikt dan komt die in hetzelfde venster als de eerste gelinkte site.
Deze vensters hebben dezelfde eigenschappen (drukknoppen, menu, schuifbalken) als het venster dat het window opende.
Je ziet ook wel eens dat er een hoop van die toeters en bellen verdwenen zijn. Dat is bijvoorbeeld het geval bij
sommige van de JavaScript-toepassingen op deze site.
Hier staat beschreven hoe je dit kunt aanpakken. Verder staat hier beschreven hoe je een browser venster kunt sluiten vanuit een ander venster.
N.B.: Het hangt af van de instellingen van je browser af of er een nieuw window of een nieuw tabblad wordt geopend. Waar op deze bladzijde een 'window' wordt genoemd, wordt óók een tabblad bedoeld.
- Voor het openen van een nieuw browser venster worden twee technieken gebruikt:
- HTML Anchor-tag: <a href="...." target="naam">.....</a>
- JavaScript functie met naam = window.open(url, naam, kenmerken)
De tweede optie heeft veel meer mogelijkheden als de eerste. Ze worden beide besproken. - Het sluiten van een venster doe je met de JavaScript opdracht window.close(). Zie verder bij punt 3.
1: Venster openen met HTML-tag
- Dit voorbeeld laat zien hoe je een hyperlink opent in een ander venster, met behulp van de HTML-tag <a href="...." target="....">tekst</a>.
- Het attribuut target wordt vooral geassocieerd met frames, maar is daar niet toe beperkt. Als je de naam van een
niet-bestaand frame of window opgeeft wordt er een nieuw window of tabblad geopend waarin de betreffende pagina wordt geladen.
Dit window heeft bepaalde "standaard" afmetingen en dezelfde attributen (knoppenbalken, schuifbalken, enz.) als het window dat het nieuwe window opent. - Achter target= vul je een naam in. Als je bij achtereenvolgende links steeds dezelfde naam gebruikt gaan al die
pagina's naar het zelfde window. Zo kun je het aantal vensters dat tegelijkertijd open staat beperken. Dat belast het geheugen
van de PC minder en daardoor loopt je browser sneller.
Dit werkt niet altijd goed met tabbladen. De reden c.q. de oorzaak daarvan is mij niet bekend. - Deze werkwijze heeft een nadeel: Als er al een window open is met naam en je opent een andere website in een window met die naam, lijkt het alsof er niets gebeurt omdat het window met naam niet op de voorgrond staat. Niets is minder waar: De website wordt gewoon geladen, je moet het alleen naar de voorgrond halen.
- Als het wilt dat het venster altijd uit zichzelf naar de voorgrond komt moet je JavaScript gebruiken, zie hieronder bij punt 2 en 2a.
- Als je _blank gebruikt voor naam wordt er altijd een nieuw window geopend (ook bij gebruik vanuit een site met frames). Dit window heeft echter geen naam, en er kan dus ook niet naar worden verwezen vanuit een script. De naam _blank is een zogenaamd "reserved word". De browser reageert daar anders op dan op een "gewone" naam.
- Andere reserved words zijn:
- _top: Laadt de pagina in het huidige, volledige venster. Als er frames zijn worden die dus weggegooid. Als er geen frames zijn dan is _top gelijk aan _self.
- _self: Zorgt ervoor dat de pagina in hetzelfde frame of window wordt geladen als het frame of window waarin de link staat.
- _parent: Opent de door de link opgeroepen pagina in het vorige venster. Als dat er niet is, is _parent gelijk aan _self.
- De met target opgegeven naam is hoofdletter-gevoelig. De namen _Blank en _blank zijn dus niet gelijk!
Gebruik:
- De code staat in de <BODY> op de plaats waar je hem nodig hebt.
- Dit voorbeeld toont het aanroepen van de site "Webmasterij.nl", in een window of tabblad met de naam "NewBen".
De code ziet er als volgt uit:
<a href="https://www.webmasterij.nl" target="NewBen">Webmasterij.nl</a>
Opmerking:
Kies je eigen naam en gebruik die consequent in je hele site.
In plaats van tekst kun je natuurlijk ook een plaatje gebruiken in de <a>-tag.
2: Venster openen met JavaScript
- In dit voorbeeld wordt de aanroep behandeld van een mail-formulier. Er wordt van uit gegaan dat het formulier in de file mailform.htm staat, op de site zelf. Voor de aanroep is de JavaScript-functie FeedBackForm() geschreven.
- De functie FeedBackForm() definieert de eigenschappen voor het window en roept daarmee window.open aan. De naam van het window wordt MijnVenster.
- De parameters die aan window.open worden meegegeven zijn:
- url: Naam van de HTML-file die in het nieuwe window moet worden geopend.
- naam: Deze laat je leeg als je window.open gebruikt zoals hier:
MijnVenster = window.open(.....)
Je kunt window.open ook "void" gebruiken, dwz zonder dat er een naam wordt teruggegeven:window.open(url,"MijnVenster",....)
- kenmerken: Zie de tabel hieronder.
Kenmerk Beschrijving width Breedte van het window in pixels (beeldpunten). height Hoogte van het window in pixels. top Plaats van de linkerbovenhoek van het window op het scherm gemeten vanaf de bovenrand, in pixels. left Plaats van de linkerbovenhoek van het window op het scherm gemeten vanaf de linker rand, in pixels. toolbar Knoppenbalk: "yes" of "no". location Locatiebalk: "yes" of "no". directories Directory-knoppen: "yes" of "no". status Status-balk: "yes" of "no".
De meeste browsers hebben geen statusbalk meer. Daarom is dit eigenlijk niet meer nodig.menubar Menu-balk: "yes" of "no". scrollbars Schuifbalk aan de rechter- en/of onderkant: "yes" of "no". resizable Afmetingen van het venster kunnen worden gewijzigd: "yes" of "no".
- Het weglaten van top, left, height en/of width leidt er toe dat er een "standaard" waarde wordt gebruikt. Deze kan afwijken van de instellingen van het window dat het nieuwe window opent.
- Niet benoemde kenmerken worden beschouwd als "no", dat wil zeggen: Niet aanwezig. Het is daarom aan te raden om alle kenmerken te noemen in de aanroep van window.open. Je weet dan zeker dat je krijgt wat je vraagt.
- Zet scrollbars altijd op "yes" zodat het hele document zichtbaar te maken is. Maar als je een popup programmeert is het beter om de scrollbars op "no" te zetten (Bij een popup zorg je dat het document precies in het window past!).
- Maak width en height niet kleiner dan 100 pixels elk om zeker te zijn dat je een "werkbaar" window krijgt.
- Open een window niet groter dan (left + width) x (top + height) = 800 x 600 pixels, ook bij grotere schermen. Dan blijft het allemaal een beetje overzichtelijk op het scherm.
- Een window dat op deze wijze wordt geopend komt op de voorgrond als de naam nog niet bestaat. Als er al een window bestaat met naam blijft het op de achtergrond, tenzij er maatregelen zijn genomen om het window op de voorgrond te krijgen. Zie hieronder bij punt 2a.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet deze code in de <HEAD>)<script>
function FeedBackForm() {
MijnVenster = window.open("mailform.htm","",
"top=50,left=50,toolbar=no,location=no,directories=no,status=no,"+
"menubar=no,scrollbars=yes,resizable=no,width=500,height=400")
}
</script>
(Zet deze code in de <BODY>, op de plaats(en) waar dat nodig is)
<a href="JavaScript:FeedBackForm()">Mail-formulier</a>
Opmerking:
In dit voorbeeld wordt het window geopend alsof het een normale link is. Natuurlijk kun je de functie FeedBackForm()
ook volledig onder controle van het JavaScript laten aanroepen, zonder dat de gebruiker daar invloed op heeft. Als een website
dat doet heet dat een pop-up. Deze web-site heeft dat niet. Sommige "gratis" webhosting providers voegen zelf een
JavaScriptje toe aan de openingspagina van een site, (hier zou dat index.html zijn), om reclame te maken voor zichzelf
of derden. Daar is niets mis mee zolang het met mate gebeurt. Als er echter elke minuut een andere pop-up over het scherm
fladdert (er zijn sites en providers die dat doen) wordt dat al gauw mateloos irritant.
In plaats van tekst kun je natuurlijk ook een plaatje gebruiken in de <a>-tag.
2a: Het venster naar de voorgrond halen
- Als je het venster naar de voorgrond wilt halen, moet je window.focus() gebruiken, in combinatie met een iets andere aanroep van window.open.
- Het resultaat van window.open wordt opgeslagen in de variabele MijnVenster. Bij de aanroep van window.open moet een naam voor het window worden gegeven, in dit geval 'BenWindow'.
- Je haalt het venster naar voren door de aanroep: MijnVenster.focus().
- In het voorbeeld zijn geen eigenschappen genoemd voor het nieuw te openen venster, zoals hierboven. Dat kan overigens wel.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van FeedBackForm() ziet er nu als volgt uit:
(Zet deze code in de <HEAD>)<script>
var WindowNaam = "BenWindow";
function FeedBackForm() {
MijnVenster = window.open("mailform.htm",WindowNaam);
MijnVenster.focus(); }
</script>
(Zet deze code in de <BODY>, op de plaats(en) waar dat nodig is)
<a href="JavaScript:FeedBackForm()">Mail-formulier</a>
Opmerking:
In plaats van tekst kun je natuurlijk ook een plaatje gebruiken in de <a>-tag.
3: Venster sluiten
- Voor het sluiten van een venster roep je gewoon de JavaScript function window.close() aan.
- Elk window dat je opent door een URL in te tikken is een parent (ouder).
- Elk window dat vanuit een parent wordt geopend (door de site zelf dus, op de manier zoals hierboven is beschreven) wordt child (kind) genoemd.
- Met window.close() kun je zonder meer een child window sluiten. Als je een parent wilt sluiten met window.close() zou dat kunnen betekenen dat een website (op internet) de browser (op je PC) uitschakelt. Dat zal meestal niet de bedoeling zijn. De browser zal dan ook eerst vragen of dat wel mag.
Gebruik:
- De code staat in de <BODY>.
De code ziet er als volgt uit:
<a href="JavaScript:window.close()">Venster sluiten</a>
Opmerking:
In plaats van tekst kun je natuurlijk ook een plaatje gebruiken in de <a>-tag.
