Professional JavaScript for Web Developers: JavaScript in the Browser, Pt. 1 | 5

Professional JavaScript for Web Developers: JavaScript in the Browser, Pt. 1

Another instance of the window object is called parent. The parent object is used with framesets that load files that are also framesets. Suppose the file named frameset1.htm contains this code:

Now what if there is also a file named anotherframeset.htm containing this code?

When the first file, frameset1.htm, is loaded into the browser, it loads anotherframeset.htm into
rightFrame. If code is written in redFrame (or blueFrame), the parent object points to rightFrame in
frameset1.htm. If, however, code is written in topFrame, the parent object actually points to top
because the browser window itself is considered the parent of any top-level frameset.

Figure 5-5 proves this fact by accessing the window object’s name property, which stores the name of the frame (but will always be blank for top).

One more global window pointer, called self, is always equal to window (yes, a bit redundant, but it’s included as a better fit with parent. It clarifies that you are not talking about the frame’s parent but the frame itself.)

If there are no frames in the page, window and self are equal to top and the frames collection has a length of 0.

It is also possible to chain references to window objects together, such as parent.parent.frames [“topFrame”], although this is generally frowned upon because any change in the frame structure results in code errors.

Manipulating windows

As mentioned previously, the window object is useful to manipulate browser windows (and frames) which means as a developer, you are able to move and resize browser windows. Four methods are available to accomplish this:

• moveBy(dx, dy) — moves the browser window dx pixels horizontally and dy pixels vertically relative to its current position. Negative numbers can be used for dx to move the window to the left and for dy to move the window up.

• moveTo(x, y) — moves the browser window so that its upper-left corner is located at position (x,y) on the user’s screen. Negative numbers can be used, but these move part of the window off of the visible screen.

• resizeBy(dw, dh) — resizes the browser window’s width by dw pixels and its height by dh pixels relative to the window’s current size. Negative numbers can be used for dw to shrink the window’s width and for dh to shrink the window’s height.

For example:

Suppose you went through all this trouble to change the size and position of a window, but you didn't keep track of the changes. Now you need to figure out where on the screen the window is located and what its dimensions are. This is where a lack of standards causes problems.

• Internet Explorer provides window.screenLeft and window.screenTop to determine the position of the window, but doesn’t provide any way of determining the size of the actual window. The size of the viewport (that area where the HTML page is displayed), can be retrieved by using document.body.offsetWidth and document.body.offsetHeight, although this isn’t a standard either.

• Mozilla provides window.screenX and window.screenY to determine the position of the window. It also provides window.innerWidth and window.innerHeight to determine the size of the viewport, as well as window.outerWidth and window.outerHeight to determine the size of the browser window itself.

• Opera and Safari provide the same facilities as Mozilla.

So the question becomes one of understanding the browsers your users have.

Even though moving and resizing browser windows is a cool trick, it should be used sparingly. Moving and resizing windows has a jarring effect on users and for this reason is usually avoided in professional Web sites and Web applications.

Reproduced from "Professional JavaScript for Web Developers" by permission of WROX. ISBN 0764579088, copyright 2005. All rights reserved. See WROX for more information.

Created: March 27 2003
Revised: June 20, 2005

URL: http://webreference.com/programming/prof_java/1