JavaScript DOM Window Object

1. Window Object

Window object is a top-level object in Client-Side JavaScript.
Window object represents the browser's window.
It represents an open window in a browser.
It supports all browsers.
The document object is a property of the window object. So, typing window.document.write is same as document.write.
All global variables are properties and functions are methods of the window object.

Window Object Properties

Property	Description
Document	It returns the document object for the window (DOM).
Frames	It returns an array of all the frames including iframes in the current window.
Closed	It returns the boolean value indicating whether a window has been closed or not.
History	It returns the history object for the window.
innerHeight	It sets or returns the inner height of a window's content area.
innerWidth	It sets or returns the inner width of a window's content area.
Length	It returns the number of frames in a window.
Location	It returns the location object for the window.
Name	It sets or returns the name of a window.
Navigator	It returns the navigator object for the window.
Opener	It returns a reference to the window that created the window.
outerHeight	It sets or returns the outer height of a window, including toolbars/scrollbars.
outerWidth	It sets or returns the outer width of a window, including toolbars/scrollbars.
Parent	It returns the parent window of the current window.
Screen	It returns the screen object for the window.
screenX	It returns the X coordinate of the window relative to the screen.
screenY	It returns the Y coordinate of the window relative to the screen.
Self	It returns the current window.
Status	It sets the text in the status bar of a window.
Top	It returns the topmost browser window that contains frames.

Window Object Method

Method	Description
alert()	It displays an alert box.
confirm()	It displays a dialog box.
prompt()	It displays a dialog box that prompts the visitor for input.
setInterval()	It calls a function or evaluates an expression at specified intervals.
setTimeout()	It evaluates an expression after a specified number of milliseconds.
clearInterval()	It clears a timer specified by setInterval().
clearTimeOut()	It clears a timer specified by setTimeout().
close()	It closes the current window.
open()	It opens a new browser window.
createPopup()	It creates a pop-up window.
focus()	It sets focus to the current window.
blurt()	It removes focus from the current window.
moveBy()	It moves a window relative to its current position.
moveTo()	It moves a window to the specified position.
resizeBy()	It resizes the window by the specified pixels.
resizeTo()	It resizes the window to the specified width and height.
print()	It prints the content of the current window.
scrollBy()	It scrolls the content by the specified number of pixels.
scrollTo()	It scrolls the content to the specified coordinates.

Example : Simple Program on Window Object

open_window.html          //File name

<html>
<head>
     <script type="text/javascript">
     function openwindow()
     {
          window.open("welcome.html");
     }
     </script>
</head>
<body>
     <form>
          <input type="button" value="Open" onClick=window.alert()>
          <input type="button" onClick="openwindow()" value="Open Window">
     </form>
</body>
</html>

welcome.html          //File name

<html>
     <body>
     <script type="text/javascript">
     {
          document.write("<b>Welcome to TutorialRide !!!</b>");
     }
     </script>
     </body>
</html>

Output:

window object 1

In the above JavaScript program, when you click on the 'Open Window', you will see the 'welcome.html' opened in another window.
When you click on the 'Open' button, you will see the alert message box.

2. Navigator Object

Navigator object is the representation of Internet browser.
It contains all the information about the visitor's (client) browser.

Navigator Object Properties

Property	Description
appName	It returns the name of the browser.
appCodeName	It returns the code name of the browser.
appVersion	It returns the version information of the browser.
cookieEnabled	It determines whether cookies are enabled in the browser.
platform	It returns which platform the browser is compiled.
userAgent	It returns the user agent header sent by the browser to the server.

Navigator Object Methods

Method	Description
javaEnabled()	It specifies whether or not the browser is Java enabled.

Example : Simple Program on Navigator Object

<html>
     <body>
     <script type="text/javascript">
          document.write("<b>Browser: </b>"+navigator.appName+"<br><br>");
          document.write("<b>Browser Version: </b>"+navigator.appVersion+"<br><br>");
          document.write("<b>Browser Code: </b>"+navigator.appCodeName+"<br><br>");
          document.write("<b>Platform: </b>"+navigator.platform+"<br><br>");
          document.write("<b>Cookie Enabled: </b>"+navigator.cookieEnabled+"<br><br>");
          document.write("<b>User Agent: </b>"+navigator.userAgent+"<br><br>");
          document.write("<b>Java Enabled: </b>"+navigator.javaEnabled()+"<br><br>");
     </script>
     </body>
</html>

Output:

Browser: Netscape

Browser Version: 5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/37.0.2062.120 Chrome/37.0.2062.120 Safari/537.36

Browser Code: Mozilla

Platform: Linux x86_64

Cookie Enabled: true

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/37.0.2062.120 Chrome/37.0.2062.120 Safari/537.36

Java Enabled: true

3. History Object

History object is a part of the window object.
It is accessed through the window.history property.
It contains the information of the URLs visited by the user within a browser window.

History Object Properties

Property	Description
Length	It returns the number of URLs in the history list.
Current	It returns the current document URL.
Next	It returns the URL of the next document in the History object.
Previous	It returns the URL of the last document in the history object.

History Object Methods

Method	Description
back()	It loads the previous URL in the history list.
forward()	It loads the next URL in the history list.
go(“URL”)	It loads a specific URL from the history list.

4. Location Object

Location object is a part of the window object.
It is accessed through the 'window.location' property.
It contains the information about the current URL.

Location Object Properties

Property	Description
hash	It returns the anchor portion of a URL.
host	It returns the hostname and port of a URL.
hostname	It returns the hostname of a URL.
href	It returns the entire URL.
pathname	It returns the path name of a URL.
port	It returns the port number the server uses for a URL.
protocol	It returns the protocol of a URL.
search	It returns the query portion of a URL.

Location Object Methods

Method	Description
assign()	It loads a new document.
reload()	It reloads the current document.
replace()	It replaces the current document with a new one.

Example : Simple Program on Location Object

<html>
     <body>
     <script type="text/javascript">
          document.write("<b>Path Name: </b>"+location.pathname+"<br><br>");
          document.write("<b>Href: </b>"+location.href+"<br><br>");
          document.write("<b>Protocol: </b>"+location.protcol+"<br><br>");
     </script>
     </body>
</html>

Output:

Path Name: /home/tutorialride2/location_object.html

Href: file:///home/tutorialride2/location_object.html

Protocol: undefined