Det script, der gemmer sig bag linket herover, er:
<a href="/javascript/res/file1.html" onclick="openWindow();return false;"> Åbn et nyt vindue</a>
openWindow()
er en funktion. For at
scriptet skal virke, skal funktionen deklareres først. Det sker
ved hjælp af et script (i <head>-sektionen), nemlig
følgende:
<script type="text/javascript"> function openWindow() { vindue=window.open("[sti]file1.html","[window name]", --> "width=400,height=300,top=150,left=1502); } </script>
Denne JavaScript metode er vigtig og meget anvendelig, så der er grund til at gennemgå den i detaljer.
body
-delen af en side skal kalde funktionen, f.eks.
onclick="openWindow()".
Vinduets egenskaber er
toolbar | Yes/No | Skal værktøjslinien vises? |
tocation | Yes/No | Skal adresselinien vises? |
directories | Yes/No | Skal links-linien vises? |
status | Yes/No | Skal statuslinien vises |
menubar | Yes/No | Skal menulinien vises? |
scrollbars | Yes/No | Skal vinduet kunne rulles? |
resizable | Yes/No | Skal vinduets størrelse kunne ændres? |
copyhistory | Yes/No | Vinduet viser liste over tidligere hentede sider |
width | Pixel | Vinduets ydre bredde |
height | Pixel | Vinduets ydre højde |
left | Pixel | Vinduets afstand fra skærmens venstre kant |
top | Pixel | Vinduets afstand fra skærmens overkant |
Denne teknik er bl.a. blevet brugt til en slags Tooltips – små forklaringer, der knytter sig forskellige elementer på siden:
I forbindelse med dette eksempel kan du gøre en vigtig iagttagelse. Hvis du har åbnet det nye vindue, og derefter klikker et eller andet tilfældigt sted i det større, bagvedliggende browservindue, vil du opdage, at det nyåbnede browservindue “forsvinder”.
Det, der rent faktisk sker, er, at du ved at klikke i det oprindelige browservindue bringer dette i fokus, i forgrund, mens det nyåbnede browservindue glider ud af fokus, det kommer i baggrund i forhold til det større browservindue, og dækkes derfor af dette.
Du og jeg er smarte nok til at vide, at vi i Windows' proceslinie kan se, at der er mere end ét browservindue. Men kan vi regne med, at den slags viden er ren rygrad hos alle vore kunder? Det er det ikke.
Det, der kan ske, er, at den mindre kyndige oplever, at det vindue, der indeholder noget vigtig information, tilsyneladende helt umotiveret forsvinder. Derfor klikker hun igen på det lille info-ikon, med samme resultat som før. Sådan kan hun blive ved indtil der er både 5, 10 og 15 åbne browservinduer.
Til det formål, der er bekrevet herover, er det langt bedre at
benytte sig af noget dynamisk HTML, som jeg beskriver det i artiklerne
Godt ord igen!,
Klik og klik igen,
Vis og skjul flere og
Vis og skjul en note ved klik eller mouseover.
Problemet med disse vinduer er, at de skal lukkes igen. Ellers kommer brugeren ret hurtigt mere eller mindre upåagtet til at åbne en masse browservinduer. Brugeren kan naturligvis lukke sådanne browservinduet via Windows' Luk vinduet-funktion, men det er vel naturligt, at websidekonstruktøren giver brugeren en mulighed for at gøre dette.
Herunder er scriptet, der vedrører det vindue, der åbnes, hvis der klikkes på info-ikonen. Læg mærke til, at det også indeholder en function, der skal lukke vinduet.
<script type="text/javascript"> function infoWindow() { nytvin=window.open("[sti]file2.html","", --> "width=400,height=300,top=100,left=100");} function luk() { nytvin.close(); } </script>
Det gør det muligt for os at lægge endnu et link ind på siden, der kalder denne funktion:
<a href="file2.html" onclick="luk();return false;"> Luk info-vinduet igen</a>
Det er funktionen lige under info-ikonen, der udløser denne funktion.
En anden metode til at lukke et sådant ekstra browservindue er at lægge en funktion ind i det ekstra vindue, der lukker vinduet, f.eks. en knap:
<button id="knap" type="button" onclick="window.close()"> Luk dette vindue!</button>
Bemærk, at dette script hører hjemme i den HTML-fil, der indlæses i det ekstra browservindue, og ikke i den fil, hvorfra det ekstra browservindue åbnes.
En tredie metode til at sørge for, at det ekstra vindue
lukkes, er at lægge et funktionskald ind i
<body>
-markøren i den HTML-fil, der skal
indlæses i det nyåbnede vindue:
onLoad="setTimeout('window.close()', 3000)"
Virkningen af dette kan efter nogle få sekunder iagttages, hvis du klikker her.
Du kan også lave lukningen ved at inkludere en tidsforsinket lukkefunktion i selve det script, der åbner det nye vindue:
<script type="text/javascript"> function infoWindow() { nytvin=window.open("[sti]file2.html","", --> "width=400,height=300,top=100,left=100"); setTimeout("nytvin.close()", 3000); } </script>
Den uheldige situation, jeg beskrev oven for, hvor det nyåbnede vindue går i baggrund i forhold til den webside, hvorfra vinduet blev åbnet, kan i sig selv anvendes til at lukke vinduet. Der er nemlig tale om en event med sin egen event handler: onblur. Hvis du nu i html-koden til det nye vindue inkluderer linjen
<body onblur="setTimeout('window.close()',1000)">
sikrer du at det nye vindue lukker et sekund efter at der er klikket uden for vinduet. Så er det nemlig noget andet, der kommer i forgrund, og blur-eventen indtræffer.
Denne side er senest opdateret: 18. May, 2008