JavaScript - Window Object

JS Window Object

JavaScript window object is top level of JavaScript Object hierarchy which represents browser window interface which contains objects like documents, history etc. The window object is also known as Browser Object Model (BOM).The window object supports all global variables, functions and variables. Global variables are called as properties and global functions are called as methods of window object.

The window object allows performing tasks such as opening and closing of browser window, displaying dialog box like alert dialog and prompt dialog, setting up time out for a action to take place after specified amount of time.

We can determine the browser window size for browsers such as internet explorer, Chrome, Firefox, Opera by using two types: window.innerHeight which specifies the inner height of the window and window.innerWidth which specifies the inner width of the window.

Properties

The following are the properties of Window object:

closed: It indicates whether window has been closed or not.
document: It contains information about document.
defaultStatus: It specifies default message displayed in the windows status bar.
innerHieght: It specifies the inner height of the window
innerWidth: It specifies the inner width of the window
name: it indicates name of the window object.
opener: It specifies window of calling document which contains a reference window which opened it.
parent: It retrieves parent of the window in the object.
screen: It gives information about the screen on which window is displayed.
self: It gives reference to the current window or frame.
top: It retrieves top level window.

Methods

The following are the methods of Window object:

alert: It displays alert dialog box which contains application defined message.
back: It specifies previous URL in the history.
blur: It removes focus from window.
clearInterval: It cancels the interval which was set by setInterval method.
clearTimeout: It cancels the timeout which was set by setTimeout method.
close: It closes the specified window.
confirm: It displays confirm dialog box with specified message.
focus: It gives focus to the window.
forward: It moves browser to next URL.
moveBy: It moves screen position by specified x and y values.
moveTo: It moves to left corner of the window to the specified x and y position.
open: It opens new browser window.
print: It is used to print the contents of the window.
resizeBy: It resizes current window by specifying x and y values.
resizeTo: It resizes window to specified width and height values.
scrollBy: It scrolls window by number of pixels .
scrollTo: It scrolls window to the specified x and y offset.
setInterval: It evaluates expression after specified number of milliseconds.
setTimeout: It evaluates expression after specified number of milliseconds has elapsed.
stop: It stops the current download.

Example

<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Window Object</title>
<body>
	<script type="text/javascript">
		function newWindow() {
			winObj = window.open("http://www.google.com", "mywindow",
					"width=500,height=500");
		}
		function closeWindow() {
			winObj.close();

		}
	</script>
</head>

<form>
	<input type="button" value="Open Window" onclick="newWindow();" />
	<input type="button" value="Close Window" onclick="closeWindow();" />

</form>
</body>
</html>

<script type=”text/javascript”> tag is used to define client side script which uses attribute type for specifying MIME type.
winObj = window.open(“http://www.google.com”, “mywindow”, “width=500,height=500”); line opens new window as specified in the URL with specified width and height as mentioned.
winObj.close(); line closes the current window.
<input type=”button” value=”Open Window” onclick=”newWindow();” /> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element it will open the new browser window.
<input type=”button” value=”Close Window” onclick=”closeWindow();” /> tag uses type attribute which defines clickable button, value attribute creates click button and onclick() event occurs when user clicks on the element it will closes the window.