DOM API - The "window" Object

JavaScript Tutorials - Herong's Tutorial Examples

∟DOM API - The "window" Object

This section provides a quick description of the 'window' object of the DOM API. A tutorial example is provided on retrieving properties from the current browser window.

The DOM API provided by the Web browser contains another useful object called "window", which has the following features:

The "window" object is a browser built-in object that represents the browser window that contains the current HTML document.
The "window" object offers a number of properties to allow you to retrieve information about the current window.
The "window" object offers a method called open() to allow you to create a new window and obtain a new window object.
The new window object created by yourself offers a number of methods to allow you to manipulate it.
For security reasons, the window manipulation methods will not work on the current window object "window".

To illustrate how to retrieve properties from the current window, I wrote this JavaScript tutorial example:

<html>
<!-- Window_Properties.html
   Copyright (c) 2008 HerongYang.com. All Rights Reserved.
-->
<head>
<title>Window Properties</title>
<script type="text/javascript">
function getWindowProperties() {
   var text = "";
   text += "'document' property: "+ window.document.title+"\n";
   text += "'location' property: "+ window.location.pathname+"\n";
   text += "'history' property: "+ window.history.length+"\n";
   text += "'navigator' property: "+ window.navigator.appCodeName+"\n";
   text += "'outerWidth,outerHeight' property: "
      + window.outerWidth+","+ window.outerHeight+"\n";
   text += "'innerWidth,innerHeight' property: "
      + window.innerWidth+","+ window.innerHeight+"\n";
   text += "'screenX,screenY' property: "
      + window.screenX+","+ window.screenY+"\n";
   return text;
}
</script>
</head>
<body>
<pre>
<script type="text/javascript">
   document.write(getWindowProperties());
</script>
</pre>
</body>
</html>

Run this JavaScript example in Firefox browser, you will get something like this:

'document' property: Window Properties
'location' property: /C:/herong/Window_Properties.html
'history' property: 3
'navigator' property: Mozilla
'outerWidth,outerHeight' property: 1024,608
'innerWidth,innerHeight' property: 1006,485
'screenX,screenY' property: 72,73

This tutorial shows that:

"window.document" returns the "document" object representing the content of the page in the current window.
"window.location" returns the "location" object representing the page address in the current window.
"window.history" returns the "history" object representing a list web addresses visited in the current window.
"window.navigator" returns the "navigator" object representing the browser.
"window.outerWidth and window.outerHeight" returns the outer size of the current window including the border, browser menu, and other browser elements.
"window.innerWidth and window.innerHeight" returns the inner size of the current window excluding the border, browser menu, and other browser elements.
"window.screenX and window.screenY" returns the top left corner location of the current window in the screen.