http://www.blazonry.com/javascript/windows.php
The statement used to open basic popup for Example 1 is:
window.open("win1.html","Window1",
"menubar=no,width=430,height=360,toolbar=no");
In the above example, the syntax is to first specify the web page to load into the window. Next, set the title of the window. Last, specify the options for the window. Note: the options are all in a single
set of quotes.
This example also demonstrates how to create a link that closes the popup. Open Window 1 again in case you missed this. The code to close the popup is:
<a href="javascript: self.close()">close window</a>
Options for JavaScript Popups
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 | specifies the inner height of window | ver 1.2 |
innerWidth | pixels | specifies the inner width of window | ver 1.2 |
screenX | pixels | specifies distance from left edge of screen | ver 1.2 |
screenY | pixels | specifies distance from top edge of screen | ver 1.2 |
Example 2: Interacting With Two Windows
An important way to navigate among windows is to give the window a name, or assign it a variable. To do this, just set the name (variable) you want, equal to the window.open
statement.
For example:
win2 = window.open("win2.html", "Window2", "width=310,height=600,scrollbars=yes");
Click Here to Open Window 2. The contents of the popup window provide more explanation.
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? The line of code to change focus is:
<a href="javascript: opener.focus()">change focus</a>
We can even close Window 2 from this link using the following statement:
<a href="javascript: (win2.close()">close</a>
Example 3: Writing To a Popup Window After It Is Open
You can open a window without first specifying HTML to load into it. Then you can write out HTML directly to that window. Click here to open Window 3. Once the window opens, switch back to this page and now
write to Window 3. You may have to switch back and forth between the windows to see that something was written into the popup window.
The statements used are:
// open the window
win3 = window.open("", "Window3", "width=320,height=210,scrollbars=yes");
// write to window
win3.document.writeln("<h2>This is written to Window 3 by the main window</h2>");
Example 4: Using a Popup for Site Navigation
One potential use of a separate popup window is as site navigation. You can place links to different sections of a web site in a popup window. While navigating the site, the whole site links are always present.
When using links in an opened window, you need to reference the 'opener' window to have links opened in that window. Do this by writing a function in the opened window which points links to the opener window. This is best shown with an example:
function openURL(sURL) {
opener.document.location = sURL;
}
<a href="javascript: openURL('home.html')">Go Home & </a>