Opening Windows with JavaScript
|
|
|
| 2.0/5.0 (1 votes total) |
|
|
|
Matt Doyle
|
One of
the most useful (and quite possibly the most abused) features of JavaScript is
its ability to manipulate browser windows. It can be very handy for creating a
pop-up navigation window, or for making snappy websites with no menus or button
bars (see one of our pagekits, filmstar, for an example of the latter).
Multiple pop-up
windows can be a real pain, especially now that certain free web space companies
are getting in on the act as a method of advertising, so go easy on them. A good
rule of thumb is: if you're opening two new windows, you're opening one too
many!
What does a pop-up
window look like? Click
here...
Splendid! How do I
do one? It's really simple. Here's the function that made that window
appear:
function
openWinBoo() { NewWindow=window.open('boo.html',
'boo', 'width=180,height=50'); }
This creates a new
window called "boo", which displays the HTML page "boo.html", and is 180 pixels
wide and 50 pixels high.
The function
openWinBoo() is called when you click on the link above. The code for the link
looks like this:
Click <a
href="javascript:openWinBoo()">here</a>
The javascript: bit
tells the browser to call a JavaScript function - in this case, our openWinBoo()
function.
Let's take a closer
look at our function. The last argument between the parentheses specifies how
our new window will look. In our example, we've just specified the width and
height with 'width=180,height=50'. However, there are many properties of the
window that are under our control.
Property |
Meaning |
directories |
The "what's new/what's cool"
bar (Netscape only!) |
location |
The box allowing the user to
type a URL |
menubar |
The menu bar (File, Edit,
etc.) |
resizable |
The user can resize the new
window by dragging |
scrollbars |
The new window has
scrollbars |
toolbar |
The toolbar (Back, Forward,
etc.) |
Each of these
properties can have the value of yes (the feature will appear in the new window)
or no (the new window will have that feature disabled).
An important point
to note about these properties is that they mustn't have spaces between them.
For example, 'width=180,height=50' will work, but 'width=80, height=50'
won't.
For example, this
function creates a new window with just the menu and the URL entry
box:
function
openWinMenuUrl() { NewWindow=window.open('menu_url.html',
'menu_url', 'width=400,height=100,location=yes,menubar=yes'); }
Click here to see it in
action.
Now you know how to
make a new window appear, and how to make that window look the way you want it.
Try playing with different properties in the window.open method and enjoy the
power of JavaScript! The End That's the
end of this tutorial. We hope you found it useful. If you're still stuck and
would like further help, check out our online Help Forums, where you can get
assistance from members of Elated and other webmasters.
If you would like
to offer us feedback on this or any of the tutorials, please email us. Have
fun! |