Popups en Cross-window Scripting

  1. Inleiding
  2. Het openen en sluiten van een popup
  3. Direct schrijven in een popup
  4. Cross-window Scripting
  5. Slotwoord en referenties
  6. Reacties op deze tutorial

Cross-window Scripting

Als je popups gebruikt zal er ongetwijfeld een moment komen waarop je informatie wilt uitwisselen tussen een popup en het hoofdscherm. Dit is zeker mogelijk met Javascript en valt onder het zogenaamde Cross-window Javascripting.

Allereerst passen we de functie, die we tot nu toe gebruikten voor het openen van een popup, iets aan. We bouwen een controle in om te kijken of de popup niet toevallig al geopend is.

Voorbeeld 4: Uitgebreide functie voor het openen van een popup
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function popUp(url) 
{
    if(!newWindow.closed && newWindow.location)
    {
        newWindow.location.href = url;
    }
    else
    {
        newWindow = window.open(url, 'naam', 'height=250,width=250,left=400,top=200');
        if(!newWindow.opener)
        {
            newWindow.opener = self;
        }
    }
    
    if (window.focus) 
    {
        newWindow.focus();
    }
    return false;
}

We zien dat allereerst gecontroleerd wordt of de popup al eens geopend is. In dat geval is newWindow.closed natuurlijk false en zal newWindow.location een waarde hebben.

Mocht een popup reeds geopend zijn, dan sturen we deze popup door naar de nieuwe url. In de meeste browsers gaat dit automatisch aangezien de popups allemaal dezelfde naam hebben, maar oudere versies van Internet Explorer willen nog wel eens problemen geven.

Mocht de popup nog niet geopend zijn dan wordt er een nieuwe popup geopend en de juiste pagina geladen. Wederom zien we natuurlijk ook weer de controle of de focus goed staat en het false retourneren om te zorgen dat de link niet gevolgd wordt.
Code
1
2
3
4
if(!newWindow.opener)
{
    newWindow.opener = self;
}

Dit is een trucje voor browsers die van zichzelf de opener variabele niet kennen. Op deze manier kunnen we hem toch gebruiken.

Voorbeeld
Open normale popup
Open popup die het hoofdscherm kan beinvloeden

Het hoofdscherm beinvloeden vanuit de popup
We hebben nu al gezien hoe we de popup kunnen beinvloeden vanuit het hoofdscherm, maar andersom is het ook mogelijk. Met behulp van de opener variabele in Javascript kunnen we vanuit een popup het scherm benaderen waarmee de popup geopend is.

Voorbeeld 5: Het hoofdscherm naar een andere pagina sturen
Code
1
2
3
4
function openerURL(url)
{
    window.opener.location.href = url;
}

Met deze functie is het mogelijk om het hoofdscherm vanuit een popup naar een andere pagina te sturen. De volgende link zou je daartoe kunnen gebruiken:
Code
1
<a href="#" onclick="openerURL('http://phphulp.jorendewit.nl')">Stuur hoofdscherm naar beginpagina</a>

Probeer het zelf uit door op de link in de popup te klikken:
Open Popup

Natuurlijk kun je de opener variabele ook gebruiken om allerlei andere onderdelen van het hoofdscherm te benaderen. Denk bijvoorbeeld aan een popup met een kalender. Je kunt een gewenste dag aanklikken en de datum wordt automatisch in het hoofdscherm op de juiste plaats in het formulier gezet.

Maar denk naast het doorsturen van het hoofdscherm naar een andere pagina of het invullen van formuliervelden ook aan bijvoorbeeld het kiezen van een layout of aanpassen van de content. Dit vereist allemaal wel complexere Javascript systemen dan hier beschreven staan, maar dat laat ik allemaal aan je eigen inspiratie over.

Sluiten van het hoofdscherm vanuit een popup
Natuurlijk is het ook mogelijk om het hoofdscherm vanuit de popup te sluiten. Met het commando opener.close() zou je dit normaal gesproken al moeten lukken.

Voorbeeld 6: Sluiten van het hoofdscherm vanuit een popup
Code
1
2
3
4
function closeOpener()
{
    window.opener.close();
}

Echter zijn er browsers waarin het niet toegestaan is om met Javascript schermen te sluiten die niet geopend zijn door Javascript. Een handige workarround is net doen alsof dat scherm wel door Javascript geopend is. Dit kan heel eenvoudig door dat scherm een opener mee te geven. Het maakt niet uit welke waarde je voor opener.opener invult, als er maar iets staat.

Als we dan ook nog een controle toevoegen of het hoofdscherm nog wel geopend is, ziet de functie voor het sluiten van het hoofdscherm er als volgt uit:
Code
1
2
3
4
5
6
7
8
9
10
11
12
function closeOpener()
{
    if(!opener.closed && opener.location)
    {
        window.opener.opener = top;
        window.opener.close();
    }
    else
    {
        alert('Hoofdscherm is al gesloten');
    }
}

Het aanroepen van deze functie kun je als volgt doen:
Code
1
<a href="#" onclick="closeOpener()">Sluit het hoofdscherm</a>

In sommige browsers zal echter nog wel om een bevestiging gevraagd worden als je dit wilt uitvoeren. Dus geheel automatisch zal het niet altijd gaan.

Vorige Volgende