Popups en Cross-window Scripting
- Inleiding
- Het openen en sluiten van een popup
- Direct schrijven in een popup
- Cross-window Scripting
- Slotwoord en referenties
- Reacties op deze tutorial
Het openen en sluiten van een popup
Zoals ik in de inleiding al zei, is het werken met popups puur Javascript. De stukken javascript die in deze tutorial staan horen, tenzij anders aangegeven, dan ook ofwel tussen de <head></head> tags in je pagina ofwel in een apart .js bestand te staan.Om een popup te openen, kun je de volgende Javascript functie gebruiken.
Voorbeeld 1: Functie voor het openen van een popup
Code
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
var newWindow = '';
function popUp(url)
{
newWindow = window.open(url, 'naam', 'height=250,width=250');
if (window.focus)
{
newWindow.focus();
}
return false;
}
function popUp(url)
{
newWindow = window.open(url, 'naam', 'height=250,width=250');
if (window.focus)
{
newWindow.focus();
}
return false;
}
Bij het aanroepen van deze functie wordt met behulp van window.open() een nieuw venster geopend. Dit commando kent een aantal paramters. De eerste paramter geeft de url aan die in het nieuwe venster geladen moet worden. Met de tweede parameter bepaal je de naam van de popup. Deze zou je kunnen gebruiken om naar de popup te verwijzen, maar ik maak er hier verder geen gebruik van. Tenslotte kun je in de derde paramter een groot aantal argumenten meegeven die de opmaak van je popup bepalen. Daarover dadelijk meer.
Eerst maar eens terug naar de popUp functie zelf. We zien dat we het nieuwe venster koppelen aan een variabele newWindow. Op die manier kunnen we later naar de popup verwijzen.
Met het if-statement, controleren we of de focus wel bij de popup ligt. Met andere woorden: of de popup wel het actieve venster is. Als dat niet zo is gebruiken we focus() om de popup naar voren te halen.
Tenslotte laten we de functie false retourneren. Dit doen we om te zorgen dat de browser de link, die we straks gebruiken om de popup te openen, niet daadwerkelijk volgt.
Openen van de popup
Om een nieuwe popup te openen zullen we de popUp() functie aan moeten roepen. Dit kunnen we bijvoorbeeld doen met de volgende link:
Code
1
<a href="popup.php" onclick="return popUp('popup.php')">Open Popup</a>
Voorbeeld
Open Popup
In de link zien we een aantal elementen. Allereerst natuurlijk het onclick attribuut waarin we de popUp functie aanroepen. De return gebruiken we om de uitkomst van de popUp functie door te geven aan de link. Zoals we al eerder gezien hebben is die uitkomst false, en dus zal de link zelf verder niet gevolgd worden.
Dan vraag je je misschien af waarom we toch ook de url invullen bij het href attribuut. Dit doen we om te zorgen dat de link ook nog werkt als javascript uitgeschakeld is. In dat geval wordt er geen popup geopend, maar wordt de link gewoon gevolgd.
Naast een link zou je bijvoorbeeld ook een button kunnen gebruiken om de popup te openen. Ik zal me in deze tutorial echter beperken tot het gebruik van links.
Argumenten
Zoals ik eerder al vermelde, kun je de derde paramter van window.open gebruiken om een groot aantal argumenten mee te geven. Alle argumenten die je meegeeft moeten gescheiden zijn door een komma, maar zonder spaties:
Code
1
'height=250,widht=250'
De belangrijkste argumenten die je kunt gebruiken zijn de volgende:
- fullscreen - Maximaliseer het venster van de popup
- height - Hoogte van de popup in pixels
- left - Positie van de linker kant van de popup
- location - Toon de adresbalk wel/niet in de popup
- menubar - Toon de menubalk wel/niet in de popup
- scrollbars - Toon wel/geen scrollbalken als dat nodig is
- top - Positie van de bovenkant van de popup
- width - Breedte van de popup
Het gebruik van verschillende argumenten zou er als volgt uit kunnen zien:
Code
1
window.open(url, 'naam', 'width=250,height=250,top=200,left=400,location=yes');
In dit geval krijg je dus een popup van 250 bij 250 pixels, gepositioneerd op 200 pixels van de bovenkant van het scherm en 400 pixels van de zijkant en met een adresbalk.
Zoals je ziet hoef je niet alle argumenten mee te geven. Standaard zal voor alle yes/no argumenten, die niet meegegeven worden, 'no' ingevuld worden.
Sluiten van een popup
Het sluiten van een popup kunnen we op twee manieren doen. Allereerst met een link in de popup zelf en daarnaast met een link in het hoofdvenster.
De link voor het sluiten van de popup vanuit de popup zelf ziet er als volgt uit:
Code
1
<a href="#" onclick="self.close()">Popup Sluiten</a>
Deze link is ook al opgenomen in de voorbeeld popup, dus kijk daar nog eens naar terug voor de werking.
De tweede manier is het sluiten via het hoofdvenster. Daarvoor gebruiken we een zelfgeschreven functie closePopup().
Voorbeeld 2: Functie voor het sluiten van een popup
Code
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function closePopup()
{
if(!newWindow.closed && newWindow.location)
{
newWindow.close();
}
else
{
alert('Geen popup geopend!');
}
return false;
}
{
if(!newWindow.closed && newWindow.location)
{
newWindow.close();
}
else
{
alert('Geen popup geopend!');
}
return false;
}
Voorbeeld
Open Popup
Sluit Popup
In deze functie wordt eerst gecontroleerd of de popup wel geopend is door te kijken of newWindow.closed false is en tevens of newWindow wel een locatie heeft. Als dat het geval is wordt de popup gesloten met close(). In het andere geval wordt er een melding gegeven.
In dit voorbeeld heb ik gebruik gemaakt van de variabele newWindow, maar daar zou je natuurlijk alle andere mogelijke namen voor kunnen verzinnen. Verder zou je voor het sluiten van de popup ook de popup kunnen benaderen via zijn naam, maar dat zal ik hier verder niet behandelen.
