Javascript

Opening New Browser Windows

Javascript & Objects | OnLoad & OnUnLoad | OnMouseOver | Math & Forms | The Date Object | Opening New Browser Windows | Javascript Caveats

Doing It with HTML

By default a link opens a file in the current window. The HTML that creates the link in this case is:
     <a href="linked.html">link</a>

But you can make a link open in a different window. In this case we've used:
     <a href="linked.html" target="newwin" >link</a>

Where the value of target is the name of the new window to open. The name can be (almost) anything. If the named window already exists (is open), the indicated file is loaded in the targeted window. If the named window isn't already open, the browser opens a new window, assigns it the indicated name, and loads the indicated file into the new window.

There are a few special, reserved, names: e.g.

_self is the current window
_parent is the window that opened the current window (if it exists)

   -- Pros and Cons of this Approach: Loading linked pages in new windows this way is easy (pro), but you have no control over the characteristics of the new browser window (may sometimes be con).

Doing It with Javascript

There are also ways that you can use Javascript to open a file in a new window, some of whose characteristics you can control. This is accomplished by using a Javascript command window.open.

   -- Pros and Cons of this Approach: A lot more control over the characteristics of the new window, but not as easy as letting HTML open the new window.

For example, click this link. The HTML code in this case is:
     <a href=" javascript:launch('linked.html','win2',400,200)" </a>

Let's consider some noteworthy features of this link:

   1. launch is a Javascript function that is defined in terms of window.open. Here's the actual definition of the function:

 
 
function launch(file,name,winwidth,winheight)      
{ 
var string= 
"width="+winwidth+",height="+winheight+"toolbar=no,  
directories=no,menubar=no,resizable=yes,dependent=yes"  
hwnd = window.open(file,name,string) ;                  
          if (navigator.appName == "Netscape") { 
             hwnd.focus() 
          } 
} 

   2. The value assigned to href in the link is now a pseudo-URL. Instead of being the name of a local file or the location of a file on the internet, it is now the name (launch) and type (javascript) of a function that will be executed when the link is clicked.

   3. The arguments of the function call of launch let you specify
     i) the file to be loaded in the new window
     ii) the name of the new window
     iii) the width of the new window
     iv) the height of the new window.

   4) The definition of the launch function specifies other characteristics of the new window: no toolbar, no menubar, is resizable, etc.

Now let's use the launch function again to open the same file in a different sized window: click this link. In this case the anchor tag is:
     <a href=" javascript:launch('linked.html','win3',200,400)" </a>
(We just switched the size of the width and height in this case.)

We can also open a new window that has more decoration. For example, let's have the new window show the menu bar, the location (URL) of the file opened in the window, and let's make the new window scrollable and resizable: click this link. Now we've used this HTML for the link:
    <a href=" javascript:locscrollmenu('linked.html','win2',400,200)" </a>

In this case we've used a Javascript function named locscrollmenu, instead of launch. Note that both locscrollmenu and launch are Javascript functions that we defined in terms of the built-in Javascript command window.open. (The basic diffences in the definitions of the two functions are the specifications of whether or not the resultant windows will have a menu bar, scroll bar, be resizable, be scrollable, etc.)

Here's a longer page (just to show the window really is scrollable).