Browser - (Window | Tab) (Javascript Global scope)

About

window:

  • The party that is visible for the user is known as the viewport
  • The document property of the window object points to the DOM document loaded in that window (ie in that tab)

Management

See

Open the console and type window.

Global Namespace Web Console Firefox

Get

  • A window for a given document can be obtained using the document.defaultView property.
  • The window variable

Size

The total size (seen and not seen). This is a window calculation, not the viewport but it can help (ie if you have element positioned absolutely outside, the innerwidth will be greater than the viewport.

The outside Width takes the whole window browser width

console.log("innerWidth: "+window.innerWidth)
console.log("innerHeight: "+window.innerHeight)

Does Javascript run in the browser ?

To test if the script is running in the browser or in node, you would test if you see the window and document variable

Example:

if ( typeof (window) !== "undefined" && window.document !== undefined ) {
  console.log("I'm running in the browser");
} else {
   console.log("I'm not running in the browser, therefore I'm running in Node");
}

Event

Documentation / Reference





Discover More
Browser
Browser - Document variable (DOM) - Javascript

In a browser, the document is: a DOM document (in-memory tree) of a XML document (generally a HTML dom document) The document is provided by the browser via its DOM webapi (Not by the Javascript...
CSS - Fixed Positioning (Anchored viewport positioning)

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..). anchored means that scrolling...
CSS - Viewport (Reader's window)

The viewport is the viewing area on a screen media. It's then a property of media. The top media of a browser is the window (ie browser tab) As an iframe create a new window, you can set a new viewport...
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
DOM - Load event (onload, load listener)

The load event is an event that is fired / emitted on: an HTML element that fetch resources on the browser window when the page has finish loading. This event is a timing page load event To...
DOM - Select an element by its id (with javascript and css example)

This article shows 1001 ways on how to select an element via its id attribute
Devtool Chrome Event Listener
DOM Event - Resize

The resize event occurs when the window is resized. The HTML with an explanation and two nodes that will be updated with the with and height respectively. The Javascript that selects the width...
Devtool Chrome Event Listener
DOM Event - focusin

focusin is a focus event where you can register a listener that is enable for all children elements. Ref If a focus event occurs in...
HTML - Browsing context (Environment)

A browsing context is a navigational context (environment) in which HTML document are rendered to the user. Each browsing context has: its own variable its own cookie its own dom and eventually...
HTML - Element's unique identifier (Id Attribute)

The DOM specification gives the concept of an element's unique identifier (ID) An element's unique identifier can be used for a variety of purposes, most notably as a way to: link to specific parts...



Share this page:
Follow us:
Task Runner