Progressive Full Stack Application Development with Live Projects

Shopping cart
No products in the cart.
JavaScript Lesson

The JavaScript Window Object

  • Window in JavaScript represents the current browser tab with which user interacts

Window is a global object in JavaScript that represents the current browser window tab.

  • Window is a global object i.e. it is available without having to import anything.
  • Window object provides methods for opening a new window and getting information about the current window

Accessing the Window

Window object is created when a webpage is loaded into the browser. Programmers can use this window (a global object) to obtain access to the browser window information and capabilities.

Open a new window

JavaScript
let newWindow = window.open(url, windowName, [windowFeatures]);

Simple Program using Window object

Have a look at the below html page that embeds the javascript code making use of the window object.

JavaScript
<!doctype html>
	<head>
		<title>My Window</title>
	</head>
	<body>
        <script>
          let height = window.outerHeight
          let width = window.outerWidth
          window.document.write("Window Dimension: "+width+"x"+height)
        </script>
	</body>
</html>

Window Properties

  • window.document: Represents the Document Object Model (DOM) of the current webpage. It allows manipulation of HTML content and structure.
  • window.location: Provides information about the current URL and allows for URL manipulation or navigation to other pages.
  • window.history: Provides access to the browser’s session history, allowing navigation backward and forward in the browser history.
  • window.navigator: Provides information about the browser and operating system.
  • window.screen: Provides information about the screen’s size and resolution.
  • window.localStorage: Provides access to the local storage for storing key-value pairs in the browser.
  • window.sessionStorage: Similar to localStorage but stores data for the duration of the page session.

Window Methods

  • window.alert(): Displays an alert dialog with a specified message.
  • window.confirm(): Displays a dialog with a specified message and OK and Cancel buttons, returning a boolean based on user interaction.
  • window.prompt(): Displays a dialog prompting the user for input and returns the user’s response.
  • window.open(): Opens a new browser window or tab with a specified URL.
  • window.close(): Closes the current browser window.
  • window.setTimeout(): Executes a function after a specified number of milliseconds.
  • window.setInterval(): Repeatedly executes a function at specified intervals in milliseconds.
  • window.clearTimeout(): Cancels a timeout set with setTimeout().
  • window.clearInterval(): Cancels an interval set with setInterval().

Window Events

  • window.onload: Event handler for when the window has finished loading.
  • window.onresize: Event handler for when the window is resized.
  • window.onscroll: Event handler for when the window is scrolled.
  • window.onbeforeunload: Event handler for when the window is about to be unloaded.

Interaction with the Browser

  • window.history.back(): Navigates backward through the browser history.
  • window.history.forward(): Navigates forward through the browser history.
  • window.scrollTo(x, y): Scrolls to a specific position in the window.
  • window.scrollBy(x, y): Scrolls by a certain amount relative to the current scroll position.

Other Properties

  • window.innerWidth and window.innerHeight: Provide the width and height of the viewport.
  • window.outerWidth and window.outerHeight: Provide the width and height of the entire browser window, including UI elements.

Special Considerations

  • Global Object Context: In non-browser environments (like Node.js), the window object does not exist. Instead, the global object might be global or globalThis.
  • Cross-Origin Security: Some properties and methods of the window object are subject to cross-origin security restrictions to prevent malicious activity.

Overall, the window object is central to client-side JavaScript, providing access to various features and functionalities of the browser environment. Understanding its properties and methods is crucial for effective web development.

Leave a Reply