Let’s take a look at how the window object works. Like I said, all variables and functions are part of the window object. Here’s an example.
var name = 'Jasko Koyn';
alert( name );
alert( window.name );
Like always, you can access a variable by it’s name. To access it via the window object, you type in window for you to use the window object. There’s no advantage to accessing a variable by using the window object. However, it gives you an idea of how all variables and functions are part of the window object.
var posx = ( window.screenLeft ) ? window.screenLeft : window.screenX;
var posy = ( window.screenTop ) ? window.screenTop : window.screenY;
document.write( posx );
We’re using something called the ternary operator. This lets us check if the screenLeft property exists. If it does, then we set the posx variable to that value. If it doesn’t, then we know the browser the visitor is using is Firefox so we access the screenX property instead. You should know that you don’t have to use the window object to access these properties. Here’s an example.
var posx = ( screenLeft ) ? screenLeft : screenX;
var posy = ( screenTop ) ? screenTop : screenY;
document.write( posx );
However, it’s best to use to access these properties from the window object so you don’t get things mixed up. Try moving your browser around and refreshing the page.
There also 2 functions for moving the browser. These are the moveTo() and moveBy() functions.
The moveTo() function allows you to move the browser to a specific location. It has 2 parameters. The first parameter is the x position and the second parameter is the y position. The moveBy() function moves the current position by a certain amount of pixels. The first parameter is the amount of pixels to move it in the x position. The second parameter is the amount of pixels to move it in the y position.
Here’s an example of how they would be used.
window.moveto( 50, 50 );
window.moveBy( 50, 50 );
Assuming the browser’s current position is 0,0, then the browser’s position will be 50,50. Then, the moveBy() function will move it 50 pixels to the left and 50 pixels down. Thus, the browser’s new position will be 100,100.
Some browsers actually disable these 2 functions. As you can see, these 2 functions can make it super annoying for the visitor. So, it’s best not to use these 2 functions.
There are 4 properties to get the dimensions of the window size. These are the innerWidth, innerHeight, outerWidth, and outerHeight properties. They can be accessed like so.
The difference between the inner and outer values is that the outer values are for the browser itself. The inner values are for the document.
You can resize the window by using the resizeTo() and resizeBy() functions. The resizeTo() function allows you to resize the browser to a specific dimension. The resizeBy() function allows you to resize the browser by a difference. Here’s an example. Assuming the browser’s width and height is 200 x 200 before the code executes.
window.resizeTo( 500, 500 ); // Width: 500, Height: 500
window.resizeBy( 50, 20 ); // Width: 550, Height: 520
These methods may be disabled depending on your browser. Once again, these methods shouldn’t be used as they aren’t guaranteed to execute.
Opening up new windows is also easy with the window object. You simply use the window.open() method. This method has 4 parameters. The first parameter is the URL. The second parameter allows you to give the window a name or specify where the window should open. The third parameter allows you to set some default options for the new window. The fourth parameter allows you to set whether or not this window should replace the current document in the history.
The first 3 parameters are mainly used. We won’t use the fourth parameter as it’s rarely used. Clear your script and add this bit of code.
window.open( 'http://jaskokoyn.com', '_blank' );
There are 4 ways to open up a new window. Take a look at the second parameter. This can be any of the following.
- _blank – This is the default value. This will open up a brand new window.
- _parent – This will load the URL in the parent frame.
- _self – This will load the URL in the same window and tab.
- _top – This will load in all framesets.
As you can see, we haven’t set the third parameter. Let’s update our line of code to this.
window.open( 'http://jaskokoyn.com', '_blank',
Alright, it may seem intimidating, but it’s really not. The third parameter is just one huge string with name-value pairs. Each pair is separated by commas. You don’t have to set every single setting. Here are the settings you can use.
|fullscreen||yes or no||This setting allows you to decide wheter or not the window should be maximized when opened.|
|height||Any Number that isn’t a negative or below 100||This setting allows you to set the height of the window if not maximized.|
|width||Any Number that isn’t a negative or below 100||This setting allos you to set the width of the window if not maximized|
|left||Any Number that isn’t a negative||This setting allows you to set the x position of the window.|
|top||Any Number that isn’t a negative||This setting allows you to set the y position of the window.|
|location||yes or no||This setting allows you to set whether or not the location bar should be displayed. This is the part of the browser that allows you to input a URL.|
|menubar||yes or no||This setting allows you to set whether or not the menubar should be displayed|
|resizable||yes or no||This setting allows you to set whether or not the visitor can resize the window at will.|
|scrollbars||yes or no||You can choose to have scrollbars if the content displayed can’t fit in the window.|
|status||yes or no||Allows you to set if the status bar should be displayed.|
|toolbar||yes or no||Allows you to set if the toolbar should be displayed.|
All of these values have default values. However, this all depends on the browser. You don’t have to set every setting above.
Manipulating New Windows
var w = window.open( 'http://jaskokoyn.com', '_blank' );
You can now use methods like resizeTo() and resizeBy() to change the dimensions by using the reference variable like so.
w.resizeTo( 200, 500 );
To close a window you can use the close() method like so.
To check if the window was closed successfully, then you can check the closed property of the window like so.
document.write( w.closed ); // true
w.document.write( 'Jasko Koyn' );
The window object is part of the BOM (browser object model). It allows you to manipulate the objects inside the window and itself. In the next tutorial, we’ll talk about timing events. More information about the window object can be found here.