JavaScript : Pop-up Windows
JavaScript allows you to create (open) new windows. In these windows you can place whatever HTML code you wish, and even have actions in one window effect what is happening in another window,
The code to open a new window is fairly straight forward, it only gets complicated when you add in all the different options available, and navigating around the different windows.
The statement used to open the Window 1 is:
"menubar=no,width=400,height=300,toolbar=no");
Looking at the above example, the syntax is first to specify the web page to load into the window, next a window identifier, and finally specify the options for the window. Notice: the options are all in one set of quotes.
Available Options for JavaScript windows are:
| Option | Values | Description | Version |
|---|---|---|---|
| location | yes|no | Does the location bar show? | ver 1.0 |
| menubar | yes|no | Does the menubar show? | ver 1.0 |
| scrollbars | yes|no | Do scrollbars show? | ver 1.0 |
| status | yes|no | Does the status bar show| | ver 1.0 |
| titlebar | yes|no | Does the titlebar show? | ver 1.0 |
| toolbar | yes|no | Does the toolbar show? | ver 1.0 |
| resizable | yes|no | Can you resize the window? | ver 1.0 |
| height | pixels | height of window | ver 1.0 |
| width | pixels | width of window | ver 1.0 |
| directories | yes|no | Does the personal toolbar show? | ver 1.2 |
| innerHeight | pixels | specifys the inner height of window | ver 1.2 |
| innerWidth | pixels | specifys the inner width of window | ver 1.2 |
| screenX | pixels | specifys distance from left edge of screen | ver 1.2 |
| screenY | pixels | specifys distance from top edge of screen | ver 1.2 |
An important way of navigating among windows is to give the window a name, or assign it a variable. To do so just set the name (variable) you want equal to the window.open statement. For example:
Click Here to Open Window 2, you can notice
what the default settings are for the numerous options, with Window2.
Now if you opened Window 2, and read it, you should have returned to this page via the focus change. If you didn't, what are you waiting for. We can close Window 2 from this page by by clicking this link.
Click Here to Open Window3, once the window opens, switch back to this page and Click here to write to Window3. You may have to
switch back and forth between the windows to see that something was written there. The
statements used are:
win3 = window.open("", "Window3", "width=300,height=200,scrollbars=yes");
// write out to window
win3.document.writeln("<H2>This is written to window 3 by the main window</H2>");
An example use of having a separate window open is to use it as a site navigation tool. You can place links to different sections of a web site open in a window, and then while navigating the site, the whole site links are always present.
When using links in an opened window you will need to reference the 'opener' window to have links opened in that window. This can be done by writing a function in the opened window which point links to the opener window. For example:
opener.document.location = sURL;
}
<a href="javascript:openURL('home.html')">Go Home & </a>
A good use of a pop-up window is a way to supply additional information to a user which isn't immediately necessary. An example is popping up a calendar window for the user to pick a day from. Here's how to combine pop-up windows and a form:
The above form uses the "opener" reference again. Opening the window is the same as previous examples. Here's the Javascript in the open window to copy the date over, our HTML form is named "f" and the field "date":
self.close();
REMEMBER: Use View Source in your browser to see the full source code of any of the examples.