Home » JavaScript » Javascript Window Object

Javascript Window Object - Browser Object Model

The Browser Object Model (BOM) is a way to interact with browser. It deals with browser components aside from the document, like history, location, navigator, frame and screen.

The default object is window i.e. it is not necessary to use window object with function, the browser automatically uses it.

For example:

Syntax

window.prompt("hello coderepublics");
It is same as :
prompt("hello coderepublics");

Javascript Window Object

If a window is open in a browser then browser uses a window object to represent that window. Every opened window/frame/dialog box has a window object. It is created automatically by the browser.

Javascript Window Object Methods

Property	Description
alert()	It displays the alert box.
confirm()	It displays a confirm dialog box.
prompt()	It displays a dialog box.
setTimeout()	It performs action after a specified time.
open()	It opens the new window.
close()	It closes the window.

We'll learn about the dialog boxes later. Below are some examples of other functions.

JavaScript open() Method

It displays the content in a new window.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object Open() Method </title>
</head>
<body>
<script type="text/javascript">
function msg(){
open("http://www.coderepublics.com");
}
</script>
<input type="button" value="CodeRepublics" onclick="msg()"/>
</body>
</html>

Output

JavaScript Object Open() Method

JavaScript setTimeout() Method

It performs any given task after some specified time interval.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Object setTimeout Method </title>
</head>
<body>
<script>
function msg(){
setTimeout(
function(){
alert("Alert after 5 seconds")
},5000);
}
</script>
<input type="button" value="Click Here !" onclick="msg()"/>
</body>
</html>

Output

JavaScript Object setTimeout Method

Width and Height Properties Of Window Object

The innerWidth and innerHeight property is used to find out the width and height of any browser window.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Viewport Dimension </title>
</head>
<body>
<script>
function windowSize(){
var w = window.innerWidth;
var h = window.innerHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Get Window Size</button>
</body>
</html>

Output

JavaScript Viewport Dimension

The width and height of any element can also be calculated by clientWidth and clientHeight but this length will be excluding the scrollbars(if any) unlike previous ones which includes the scrollbar length too.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Viewport Dimension </title>
</head>
<body>
<script>
function windowSize(){
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Get Window Size</button>
</body>
</html>

Output

JavaScript Viewport Dimension

You can also check Javascript location.reload(true) method that helps you to refresh the whole webpage.

Recommended :

1 . Variables and Datatypes in JavaScript
2 . For loop in JavaScript
3 . Array Sorting methods
4 . innerHTML Usage

5 . Event listner in JavaScript
6 . Error Handling in JavaScript
7 . Create Simple Login Form
8 . Create Simple Login Form

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors