Next: Messages and Confirmations Up: JavaScript Examples Previous: Manipulating Windows

Opening a New Window

windows are independent of each other any windows
can be spawned from our code
can be made to look and act totally differently.

The open() method

Recall from last lecture window object definition :

open("URL ", "name ")
close()

toolbar=[1|0]
location=[1|0]
directories=[1|0]
status=[1|0]
menubar=[1|0]
scrollbars=[1|0]
resizable=[1|0]
width=pixels
height=pixels

So our JavaScript can be developed to:

open a new window from a current one
loads specified a URL and
attributes of new window can be customised.

The Code is as follows:

<html>
<head>
 <script language=javascript>
 <!--
  function Load(url){
    
    newwin = open(url, "newwin",
                  'status=0,
                   toolbar=0,
                   resizable=0,
                   width=500,
                   height=700');
     }
 //-->
 </script>
</head>

<body>
  <a href="" 
   onClick="Load('http://www.cs.cf.ac.uk')">
   New page</a>
</body>
</html>

The basic operation of the code is:

Page Link is loaded into new window.
The URL and window name are not optional
- the URL can be replaced with empty quotes to open a blank window.
```
open("","blankwin);
```
Window has fixed given size:
- cannot be resized
No toolbar or status is present either.
Set resize,width height etc. parameters:
- The parameter list must be inside a single set of single quotes,
- There cannot be line breaks or spaces in the parameter string (licence is taken in the notes for space considerations)
- Don't have any spaces between the parameters,
- Don't forget the commas between parameters.

Second Example: Web Advertising

Commonly used in web adverts
Access main page
bring up a second window with adverts in
simply call a open() on an onLoad() event.
Load a web page ad.html in this window.

<html>
<head>
 <script language=javascript>
 <!--
  function Load(url){
    
    newwin = open(url, "newwin",
             'status=0,toolbar=0,
              resizable=0,
              width=500,
              height=700');
     }
 //-->
 </script>
</head>

<body onLoad="Load('ad.html')">
  
  
  <h1> MAIN  PAGE HERE</h1>
</body>
</html>

Next: Messages and Confirmations Up: JavaScript Examples Previous: Manipulating Windows

Dave Marshall
9/28/2001