Monday, April 20, 2020

Javascript Window Object

Window Object

The window interface is supported by all browsers and it is provided by the browser itself. The window object is the property of the browser. 

In browser JavaScript, all of the global objects, functions, and variables are automatically the members of this object. The window interface is entitled to present a window that constitutes a complete DOM document. In simple words, a window object represents an open window (tab) in a browser. Even we can access the entire DOM document using the document property. The document.defaultView property can be used to obtain the window for the given document. 

In browser JavaScript, the window is a global variable and represents the entire window within which the script is executing. The window object is available within an entire document with the global scope. 

If multiple tabs are being used in the browser then each tab has its own window object. However, few properties and methods are still applicable to the overall browser window like resizeTo() and innerHeight()

If a page is containing <iframe> tags, then the browser generates one window object for the overall document and one additional window object per <iframe> tag. 

javascript window object

Properties

closed

This property indicates whether a window has been closed or not

console

Return a reference to the Console object. This is used to provide methods for displaying logging information to the browser's console

document

This property represents the reference to the Document object for the window.

frames

Returns an array of all the <iframe> elements in the current window

history

Represents the History object for the document window

innerHeight

This property represents the height of the content area (viewport) of the current window including horizontal scrollbars

innerWidth

This property returns the width of the content area (viewport) of the current window including vertical scrollbars

length

This property represents the number of <iframe> tags in the current window

frameElement

This property can be used to get the element in which the window is embedded, or null if the window is not embedded.

localStorage

Return the reference to the local storage object and allows us to save key/value pairs in a web browser. Stores the data with no expiration date

location

This property is used to represent the location object for the current window

name

This property can be used to set or get the name of a window

navigator

Returns the Navigator object for the window

isSecureContext

This property indicates whether a context has the capability of using features that require secure contexts.

opener

Returns a reference to the window that is opened in the current window

outerHeight

To get the outer height of the browser window, including toolbars/scrollbars

outerWidth

To get the outer width of the browser window, including toolbars/scrollbars

pageXOffset

This is an alias of window.scrollX

pageYOffset

This is an alias for window.scrollY

parent

Returns a reference to the parent window or subframe of the current window

status

It is used to get or set the text in the status bar at the bottom of the browser.

window.window 

To get the reference to the current window

screen

It is used to get the reference to the screen object for the window

screenLeft or screenX

Represents the horizontal coordinate of the window relative to the screen

screenTop or screenY

Represents the vertical coordinate of the window relative to the screen

sessionStorage

Allows saving key/value pairs in a web browser. Stores the data for one session

self

to get the current window reference

top

This property returns the reference to the topmost window in the window hierarchy.

Methods

alert()

to show an alert box with a text message and an OK button

atob()

to decodes a base-64 encoded string

blur()

This method blurs the current window and removes focus

btoa()

To encodes a string in base-64

clearInterval()

Clears a timer set with setInterval() method.

clearTimeout()

It clears a timer set by setTimeout()

close() 

It is used to the current window

confirm()

To show a dialog box(confirm()) with a text message and two buttons OK and Cancel

focus()

To set the focus on the current window

getComputedStyle()

To get the computed CSS styles applied to an element

getSelection()

This method returns a Selection object for the range of text selected by the user

matchMedia()

This method returns a MediaQueryList object representing the specified media query string

moveBy()

This media is used to move the current window by a specified amount

moveTo()

This media is used to move a window to the specified position

open()

To open a new browser window

print()

This media is used to prints the content of the current window

prompt()

To show a dialog box that prompts(prompt box) the visitor for input, OK and Cancel buttons

requestAnimationFrame()

This media is used to request the browser to invoke a function to update an animation before the next repaint

resizeBy()

To resize the window size by the defined pixels

resizeTo()

To resize the window size to the provided width and height

scrollBy()

To scroll in the document by the provided number of pixels

scrollTo()

To scroll in the document to the provided coordinates

setInterval()

This method invokes a function or evaluates an expression at specified intervals (in milliseconds)

setTimeout()

This method invokes a function or evaluates an expression after a specified number of milliseconds

stop()

To stops the window from loading