Home arrow JavaScript arrow Page 2 - Controlling Browser Properties with JavaScript

Starting at the Top - JavaScript

Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.

  1. Controlling Browser Properties with JavaScript
  2. Starting at the Top
  3. Moving Windows
  4. Bar Tales
  5. Navigating the Family Tree
  6. Location is Everything
  7. History Lesson
  8. Down to the Document
By: Nariman K, (c) Melonfire
Rating: starstarstarstarstar / 120
February 02, 2004

print this article



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");

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",

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",

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",

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

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.

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: