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
Direct schrijven in een popup
Op de vorige pagina hebben we gezien hoe we een popup kunnen openen en sluiten. Bij het openen van de popup hebben we tot nu toe telkens een url meegegeven van de pagina die in die popup geladen moet worden. Echter kunnen we ook zelf direct gegevens in de popup schrijven.Stel dat we een popup willen openen met de volgende inhoud:
Code
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<html>
<head>
<link href="/styles/default.css" rel="stylesheet" />
</head>
<body>
<p>Dit is een Popup</p>
<p><a href="#" onclick="self.close()">Popup Sluiten</a></p>
</body>
</html>
<head>
<link href="/styles/default.css" rel="stylesheet" />
</head>
<body>
<p>Dit is een Popup</p>
<p><a href="#" onclick="self.close()">Popup Sluiten</a></p>
</body>
</html>
Dan zouden we daar de volgende functie voor kunnen gebruiken.
Voorbeeld 3: Direct schrijven in een popup
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function popUpWrite()
{
newWindow = window.open('', 'naam', 'height=250,width=250,left=400,top=200');
tmp = newWindow.document;
tmp.write('<html>');
tmp.write('<head><link href="/styles/default.css" rel="stylesheet" /></head>');
tmp.write('<body>');
tmp.write('<p>Dit is een Popup</p>');
tmp.write('<p><a href="#" onclick="self.close()">Popup Sluiten</a></p>');
tmp.write('</body>');
tmp.write('</html>');
tmp.close();
if (window.focus)
{
newWindow.focus();
}
return false;
}
{
newWindow = window.open('', 'naam', 'height=250,width=250,left=400,top=200');
tmp = newWindow.document;
tmp.write('<html>');
tmp.write('<head><link href="/styles/default.css" rel="stylesheet" /></head>');
tmp.write('<body>');
tmp.write('<p>Dit is een Popup</p>');
tmp.write('<p><a href="#" onclick="self.close()">Popup Sluiten</a></p>');
tmp.write('</body>');
tmp.write('</html>');
tmp.close();
if (window.focus)
{
newWindow.focus();
}
return false;
}
We zien dat er geen url opgegeven wordt bij window.open(). In plaats daarvan gebruiken we write() om regels naar het nieuw geopende document te schrijven. Na het schrijven controleren we wederom of de focus wel bij de popup ligt en retourneren we false om te zorgen dat de link niet gevolgd wordt.
De link om de popup te openen ziet er nu als volgt uit:
Code
1
<a href="#" onclick="return popUpWrite()">Open popup</a>
Voorbeeld
Open Popup
We geven nu geen url op bij het href attribuut, simpelweg omdat er geen url is die geladen kan worden. We schrijven nu immers zelf een pagina met Javascript.
