Ex: Window.Open/Close

JavaScript - Objects - window - Open/Close - Slip Hugo fri
> onClick(), onMouseOut()

Med onClick="window.open()" kan alle elementer - fx et billede - fungere som link til en anden side, som åbnes i et nyt vindue:

<img SRC="hugo.gif" ALT="Slip Hugo fri" Border="0" WIDTH="48" HEIGHT="75"
onClick="window.open('hugo.htm','results','width=314,height=298')">

Det nye vindue kan fx lukkes igen med onMouseOut=window.close():

<img SRC="hugo.gif" ALT="Slip Hugo fri" Border="0" WIDTH="48" HEIGHT="75"
onClick="w = window.open('hugo.htm','results','width=314,height=298')"
onMouseOut="w.close()">

NB: når onClick() - som i eksemplerne herover - blot er indlejret i elementet, kan man ikke umiddelbart se, at det fungerer som link - der mangler en 'hånd', når musen peger på elementet.

Hvis onClick() lægges ind i en <a HREF="...">kode, får man et link, som ligner alle andre links - med 'hånd' - men her kan der opstå nogle problemer, som kan løses på forskellige måder:

Følgende model med et dummy bogmærke ("#") benyttes ofte - klik på Hugo:

<a HREF="#" 
   onClick="window.open('hugo.htm','results','width=314,height=298')">
  <img SRC="hugo.gif" ALT="Slip Hugo fri" Border="0" width="48" height="75">
</a>

Det virker fint - i toppen af websiden. Når det nye vindue lukkes vender vi med denne kode altid tilbage til toppen af websiden - og det var måske ikke meningen, hvis vi befinder os længere nede på siden.
I bunden af denne side er anbragt en kopi af koden - prøv den og se virkningen.

En halv løsning er følgende link, som godt nok vender tilbage til det samme sted på siden:

<a NAME="#1" HREF="#1" 
   onClick="window.open('hugo.htm','results','width=314,height=298')">
  <img SRC="hugo.gif" ALT="Slip Hugo fri" Border="0" width="48" height="75">
</a>

- men bogmærket bliver altid anbragt øverst i vinduet - så billedet hopper ofte - ikke ideelt.

En anden løsning er JavaScript uden bogmærke - men her er et andet problem: et ekstra uønsket vindue:

<a HREF="JavaScript: 
   window.open('hugo.htm','results','width=314,height=298')">
 <img SRC="hugo.gif" ALT="Slip Hugo fri" 
      Border="0" width="48" height="75">
</a>

Problemet opstår, fordi metoden window.open() returnerer et objekt, som får <a HREF>koden til at åbne et ekstra vindue - foruden det vindue, der skal åbnes.

Det ekstra vindue fjernes med void, som bruges til at ignorere returnerede værdier:

<a HREF="JavaScript: 
   void window.open('hugo.htm','results','width=314,height=298')">
 <img SRC="hugo.gif" ALT="Slip Hugo fri" 
      Border="0" width="48" height="75">
</a>

Problemet kan også løses ved at pakke window.open() ind i en <script> sektion med en funktion - AabnVindue() - som ikke returnerer noget (ingen return).

<script LANGUAGE="JavaScript">

function AabnVindue()
{ window.open("hugo.htm", "results", "width=314, height=298")} 

</script>

Denne kode kan kaldes i et link:

<a HREF="JavaScript: AabnVindue()">
   <img SRC="hugo.gif" ALT="Slip Hugo fri" 
    Border="0" width="48" height="75">
</a>

Hvis det objekt, som window.open() returnerer, skal bruges senere, kan objektet gemmes i en variabel
w = window.open()
Herefter kan man fx lukke det åbnede vindue med
w.close().

Men w = window.open() returnerer også et objekt, som med HREF starter et ekstra, uønsket vindue.
I dette tilfælde skal void benyttes på denne måde: void (w = window.open())

Her lukkes vinduet igen, når musen fjernes fra det lille billede:

<a HREF="JavaScript: 
   void (w = window.open('hugo.htm','results','width=314,height=298'))">
   <img SRC="hugo.gif" ALT="Slip Hugo fri" 
    Border="0" width="48" height="75"
    onMouseOut="w.close()">
</a>

Kopi af koden i toppen af denne side - klik på Hugo - når det nye vindue lukkes, vender vi ikke tilbage hertil - men til toppen afdokumentet, fordi dummy-bogmærket ("#") ikke findes.

<a HREF="#" 
   onClick="window.open('hugo.htm','results','width=314,height=298')">
  <img SRC="hugo.gif" ALT="Slip Hugo fri" Border="0" width="48" height="75">
</a>