Controlling Browser Properties with JavaScript - Starting at the Top
(Page 2 of 8 )

I'll begin at the beginning, with the top-level Window object. The Window object is at the top of the DOM hierarchy; all other nodes are under it, including objects representing the document's frames, forms, images, links and styles. This object comes with a bunch of useful methods, of which the two most commonly-used ones are the open() and close() methods. Here's an example of using the Window object's open() method to open a new browser window:


<script language="JavaScript">
// open a new window
window.open("http://localhost", "new");
</script>



As you will see when you run it in a browser, this line of code opens up a new window, loading the URL "http://localhost" into it. Thus, the first argument to window.open() is always the URL to be loaded, while the second is the window name.

You can also control the appearance of the window, by adding a third argument - a comma-separated list of window attributes. Here's an example:


<script language="JavaScript">
// open a new window
window.open(<A href="http://localhost">http://localhost</A>, "new",
"toolbar=no,status=no,menubar=no,scrollbars=no");
</script>



Here's a brief list of the important attributes that window.open() lets you control:

"width" - Controls the width of the new window.

"height" - Controls the height of the new window.

"location" - Toggles the address or location box.

"toolbar" - Toggles the toolbar.

"status" - Toggles the status bar.

"menubar" - Toggles the menu bar.

"scrollbars" - Toggles the scrollbars.

"directories" - Toggles the directories or links bar.

"resizable" - Is the window resizable ?

These attributes can be turned on or off by equating them with either a 1 or 0. Height and width values must be specified in pixels.

Thus, if you wanted to open a window with the address bar and status bar off, but the links bar on, you would use this code:


<script language="JavaScript">
// open a new window
window.open(<A href="http://localhost">http://localhost</A>, "new",
"location=no,status=no,directories=yes");
</script>



If instead you wanted a window of height 640 and width 480, non-resizable and with no bars showing, you could use this code:


<script language="JavaScript">
// open a new window
window.open("http://localhost", "new",
"width=480,height=640,toolbar=no,resizable=no,
menubar=no,location=no,status=no,directories=no");
</script>



Note that leaving the third argument to window.open() empty pops open a window with default settings. Note also that you should not leave spaces between the various window attributes listed in the third argument to window.open() - they can cause problems with certain browsers.

Now, how about closing a window that you've opened? It's pretty easy – just use the window.close() method, as in the following example:


<a href="javascript:window.close()">
Close Window</a>



Now, when the user clicks the "Close Window" link above, the window should close automatically. Note that if the window you're trying to close through JavaScript is the primary browser window, browser security settings might require you to confirm your action through a dialog box.

Next: Moving Windows >>
 

More JavaScript Articles
More By Nariman K, (c) Melonfire

Comments On: Controlling Browser Properties with JavaScript

>>> Be the FIRST to comment on this article!