Åbn et nyt browservindue

Åbn et nyt vindue

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>

Gennemgang af window.open metoden

Denne JavaScript metode er vigtig og meget anvendelig, så der er grund til at gennemgå den i detaljer.

  1. Det, der sker i scriptet herover, er, at vi deklarerer en JavaScript funktion. Funktionens navn er openWindow. Det er det navn, vi skal bruge, når vi via en event (hændelse) i body-delen af en side skal kalde funktionen, f.eks. onclick="openWindow()".
  2. Det hele er oprettet som en variabel med navnet vindue. Dette variabelnavn har vi brug for, hvis vi skal manipulere med dette nye vindue, f.eks. lukke det igen fra det vindue, hvorfra det er åbnet.
  3. Så følger metoden, der hedder window.open.
  4. I parantesen følger så 3 attributter til metoden. Disse attributter eller egenskaber er adskilt med kommaer og indrammet af enkelt-anførselstegn.
  5. Den første attribut er navnet på den html-fil, der skal placeres i det nyåbnede vindue. Foran filnavnet skal evt. være en sti, hvis filen ikke ligger i samme folder som den html-fil, hvorfra det nye vindue åbnes. (Her anført som [sti]).
  6. Herefter følger et window name, nyt navn, vi har brug for, hvis vi vil referere til det nye vindue. Kan udelades, hvis du ikke har planer om noget sådant. Hvis name udelades, skal de to enkelt-anførselstegn alligevel med.
  7. Og som sidste attribut kommer evt. en række egenskaber ved det nyåbnede vindue. Disse er som standard sat til 0 eller NO, og skal derfor sættes til 1 eller yes, hvis man ønsker disse egenskaber ved det nyåbnede vindue. Jf. nedenstående ovensigt.

Vinduets egenskaber er

toolbarYes/NoSkal værktøjslinien vises?
tocationYes/NoSkal adresselinien vises?
directoriesYes/NoSkal links-linien vises?
statusYes/NoSkal statuslinien vises
menubarYes/NoSkal menulinien vises?
scrollbarsYes/NoSkal vinduet kunne rulles?
resizableYes/NoSkal vinduets størrelse kunne ændres?
copyhistoryYes/NoVinduet viser liste over tidligere hentede sider
widthPixelVinduets ydre bredde
heightPixelVinduets ydre højde
leftPixelVinduets afstand fra skærmens venstre kant
topPixelVinduets afstand fra skærmens overkant

Tooltips og hjælp

Denne teknik er bl.a. blevet brugt til en slags Tooltips – små forklaringer, der knytter sig forskellige elementer på siden:

Klik for yderligere information

Luk info-vinduet igen

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.

Brug DOM JavaScript

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.

Vinduet skal lukkes igen

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>

Åbne et tredie vindue

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>

Når vinduet taber fokus

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.

klikker her.

Denne side er senest opdateret: 18. May, 2008