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:
- 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