Window manipulation

This page gives an overview of the methods and properties of the window object that you need to read out data about the user's screen, or to move the window across the screen. This is generally only possible in Version 4 and higher browsers.

Of course, Netscape and Explorer sometimes use different properties. Netscape and the minor browsers read out some window stuff by self and self.screen, while Explorer uses document.body.

Now on to the properties, then the methods. After those, I give a little example script. that includes the solution for the Netscape 4 resizeTo bug.

Properties

• All properties give measurements in pixels, unless otherwise noted.
• Other browsers: Opera 6 (5b5 on Mac), iCab Pre2.6, WebTV Viewer 2.6, Ice Browser 5, Hotjava 3, Konqueror 2.2.2, Omniweb 4, Escape 4.7 .
• There are a lot more properties than the ones below, but for some reason or another they're always 0 or null. I included only those properties that actually give useful information.

I need to do some new tests since several browser vendors have released upgrades since this table was written. I added some Konqueror 2.2.1 notes that a reader sent me, but haven't done any research since I haven't had the time yet. Please be patient.

For some more information, check Dr. Unclear's window properties page. Contains a useful example script for Netscape 6.

Your browser

These are the properties that work in your browser:

(Refresh list)

Methods

These are the methods of window that have something to do with window manipulation.

Example script

Finally an example script that includes the solution to the Netscape 4 resizeTo bug.
Let's suppose that you want the window to resize to exactly one half of the screen width and height and to center the window if this content frame covers more than 50% of the screen. (Why would you want to do this? I have no idea, but this script nicely combines the basics of window manipulation)

When you click this link, this script is executed:

function doIt()
{
	if (self.innerWidth)
	{
		frameWidth = self.innerWidth;
		frameHeight = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientWidth)
	{
		frameWidth = document.documentElement.clientWidth;
		frameHeight = document.documentElement.clientHeight;
	}
	else if (document.body)
	{
		frameWidth = document.body.clientWidth;
		frameHeight = document.body.clientHeight;
	}
	else return;

	if (self.screen.width < frameWidth *2 || self.screen.height < frameHeight *2)
	{
		newWidth = self.screen.width/2;
		newHeight = self.screen.height/2;
		if (document.layers)
		{
			tmp1 = parent.outerWidth - parent.innerWidth;
			tmp2 = parent.outerHeight - parent.innerHeight;
			newWidth -= tmp1;
			newHeight -= tmp2;
		}
		parent.window.resizeTo(newWidth,newHeight);
		parent.window.moveTo(self.screen.width/4,self.screen.height/4);
	}
	else
	{
		alert('No resize necessary');
	}
}

First of all, find the current frame width and height. You need three sets of code, one for Netscape, one for Explorer 6 if you use a DOCTYPE, and one for Explorer in all other cases:

if (self.innerWidth)
{
	frameWidth = self.innerWidth;
	frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
	frameWidth = document.documentElement.clientWidth;
	frameHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
	frameWidth = document.body.clientWidth;
	frameHeight = document.body.clientHeight;
}

Please note that the innerWidth bit must go first, since Netscape 6 also supports document.body, though the information we need is still stored in innerWidth/Height.

Now frameWidth and frameHeight contain the width and height of this frame in all Version 4 browsers. If the browser supports neither self.screen nor document.body it's too old to handle this script, so we end the function here to prevent error messages:

else return;

Find out if width or height are more than half of screen width and height:

if (self.screen.width < frameWidth *2 || self.screen.height < frameHeight *2)
{

If either of them is more than half the window size, calculate the initial new width and height: half the screen width and height.

	newWidth = self.screen.width/2;
	newHeight = self.screen.height/2;

Working around the Netscape 4 resizeTo bug

However, Netscape 4 has a bug in its implementation of resizeTo: it resizes the window so that the actual content window (without the toolbars etc.) gets the required size instead of the entire window, as the other browsers do. Therefore we have to do an extra calculation for Netscape 4.

	if (document.layers)
	{

First we have to find out how much space the toolbars, status bars and other stuff take. Subtract the inner dimensions from the outer dimensions to get this values. Note that I'll have to take the width and height of the parent. I want to use the dimensions of the entire window, not only of this frame.

		tmp1 = parent.outerWidth - parent.innerWidth;
		tmp2 = parent.outerHeight - parent.innerHeight;

Now subtract this difference from the new width and height:

		newWidth -= tmp1;
		newHeight -= tmp2;
	}

Now we can resize the parent (= the frameset) to the new width and height and have the desired result in all browsers:

	parent.window.resizeTo(newWidth,newHeight);

Finally center the parent:

	parent.window.moveTo(self.screen.width/4,self.screen.height/4);
}

I give an alert when resizing isn't necessary, you wouldn't need this if this were a real script.

else
{
	alert('No resize necessary');
}

Home