JavaScript Window Object
The window object represents the browser window and is the global object in browser JavaScript. All global variables, functions, and objects are properties of the window object. It provides methods and properties for controlling the browser window.
The window Object
The window object is the top-level object in the browser. It represents the browser window and provides access to the DOM, browser history, location, and other browser APIs.
// window is the global object in browsers
console.log(typeof window);
// Global variables are window properties
var globalVar = 'Hello';
console.log(window.globalVar);
// Global functions are window methods
// alert() is actually window.alert()
// setTimeout() is actually window.setTimeout()
// Note: let and const are NOT added to window
let localLet = 'not on window';
console.log(window.localLet); // undefined
console.log('window === globalThis: ' + (window === globalThis));Window Dimensions
The window object provides properties to get the dimensions of the browser window, including the viewport size and outer dimensions.
// Viewport size (content area)
console.log('innerWidth: ' + window.innerWidth);
console.log('innerHeight: ' + window.innerHeight);
// Full window size (including toolbars)
console.log('outerWidth: ' + window.outerWidth);
console.log('outerHeight: ' + window.outerHeight);
// Screen info
console.log('Screen width: ' + screen.width);
console.log('Screen height: ' + screen.height);
console.log('Available width: ' + screen.availWidth);
console.log('Available height: ' + screen.availHeight);window.open() and window.close()
window.open() opens a new browser window or tab. window.close() closes a window that was opened by JavaScript. Modern browsers restrict these for security and user experience.
// window.open(url, name, specs)
// const newWin = window.open(
// 'https://example.com',
// '_blank',
// 'width=500,height=400'
// );
// Close the opened window
// newWin.close();
// Check if window is closed
// console.log(newWin.closed);
console.log('window.open(url, target, specs)');
console.log('Targets: _blank, _self, _parent, _top');
console.log('Specs: width, height, left, top, menubar, toolbar');
// Modern note:
console.log('\nNote: Most browsers block popups');
console.log('Only allowed from user-triggered events');
console.log('(click, keypress, etc.)');setTimeout and setInterval
window.setTimeout() executes code after a delay. window.setInterval() executes code repeatedly at intervals. Both return an ID that can be used to cancel them.
// setTimeout - run once after delay
const timeoutId = setTimeout(function() {
console.log('Timeout: runs after 1 second');
}, 1000);
// clearTimeout - cancel a timeout
// clearTimeout(timeoutId);
// setInterval - run repeatedly
let count = 0;
const intervalId = setInterval(function() {
count++;
console.log('Interval tick: ' + count);
if (count >= 3) {
clearInterval(intervalId);
console.log('Interval cleared');
}
}, 300);
console.log('Timeout ID: ' + timeoutId);
console.log('Interval ID: ' + intervalId);window.scrollTo() and Other Methods
The window object provides methods for scrolling, printing, focusing, and more.
| Method | Description |
|---|---|
| window.scrollTo(x, y) | Scroll to specific coordinates |
| window.scrollBy(x, y) | Scroll relative to current position |
| window.scroll() | Alias for scrollTo |
| window.print() | Open print dialog |
| window.focus() | Set focus to window |
| window.blur() | Remove focus from window |
| window.stop() | Stop loading the page |
| window.getComputedStyle() | Get computed CSS styles |
// Scroll to top
// window.scrollTo(0, 0);
// Smooth scroll to position
// window.scrollTo({
// top: 500,
// left: 0,
// behavior: 'smooth'
// });
// Scroll down by 100 pixels
// window.scrollBy(0, 100);
console.log('scrollTo(x, y) - absolute position');
console.log('scrollBy(x, y) - relative scroll');
console.log('behavior: smooth for animated scrolling');
// Current scroll position
console.log('scrollX: ' + window.scrollX);
console.log('scrollY: ' + window.scrollY);
console.log('pageXOffset: ' + window.pageXOffset);
console.log('pageYOffset: ' + window.pageYOffset);