Setting window properties javascript

JavaScript Window — The Browser Object Model

The Browser Object Model (BOM) allows JavaScript to «talk to» the browser.

The Browser Object Model (BOM)

There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.

The Window Object

The window object is supported by all browsers. It represents the browser’s window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

Window Size

Two properties can be used to determine the size of the browser window.

Both properties return the sizes in pixels:

• window.innerHeight — the inner height of the browser window (in pixels)
• window.innerWidth — the inner width of the browser window (in pixels)

The browser window (the browser viewport) is NOT including toolbars and scrollbars.

Example

Other Window Methods

• window.open() — open a new window
• window.close() — close the current window
• window.moveTo() — move the current window
• window.resizeTo() — resize the current window

Источник

The Window Object

The window object represents an open window in a browser.

If a document contain frames ( tags), the browser creates one window object for the HTML document, and one additional window object for each frame.

Window Object Properties

Property	Description
closed	Returns a boolean true if a window is closed.
console	Returns the Console Object for the window. See also The Console Object.
defaultStatus	Deprecated.
document	Returns the Document object for the window. See also The Document Object.
frameElement	Returns the frame in which the window runs.
frames	Returns all window objects running in the window.
history	Returns the History object for the window. See also The History Object.
innerHeight	Returns the height of the window’s content area (viewport) including scrollbars
innerWidth	Returns the width of a window’s content area (viewport) including scrollbars
length	Returns the number of elements in the current window
localStorage	Allows to save key/value pairs in a web browser. Stores the data with no expiration date
location	Returns the Location object for the window. See also the The Location Object.
name	Sets or returns the name of a window
navigator	Returns the Navigator object for the window. See also The Navigator object.
opener	Returns a reference to the window that created the window
outerHeight	Returns the height of the browser window, including toolbars/scrollbars
outerWidth	Returns the width of the browser window, including toolbars/scrollbars
pageXOffset	Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
pageYOffset	Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window
parent	Returns the parent window of the current window
screen	Returns the Screen object for the window See also The Screen object
screenLeft	Returns the horizontal coordinate of the window relative to the screen
screenTop	Returns the vertical coordinate of the window relative to the screen
screenX	Returns the horizontal coordinate of the window relative to the screen
screenY	Returns the vertical coordinate of the window relative to the screen
sessionStorage	Allows to save key/value pairs in a web browser. Stores the data for one session
scrollX	An alias of pageXOffset
scrollY	An alias of pageYOffset
self	Returns the current window
status	Deprecated. Avoid using it.
top	Returns the topmost browser window

Window Object Methods

Method	Description
addEventListener()	Attaches an event handler to the window
alert()	Displays an alert box with a message and an OK button
atob()	Decodes a base-64 encoded string
blur()	Removes focus from the current window
btoa()	Encodes a string in base-64
clearInterval()	Clears a timer set with setInterval()
clearTimeout()	Clears a timer set with setTimeout()
close()	Closes the current window
confirm()	Displays a dialog box with a message and an OK and a Cancel button
focus()	Sets focus to the current window
getComputedStyle()	Gets the current computed CSS styles applied to an element
getSelection()	Returns a Selection object representing the range of text selected by the user
matchMedia()	Returns a MediaQueryList object representing the specified CSS media query string
moveBy()	Moves a window relative to its current position
moveTo()	Moves a window to the specified position
open()	Opens a new browser window
print()	Prints the content of the current window
prompt()	Displays a dialog box that prompts the visitor for input
removeEventListener()	Removes an event handler from the window
requestAnimationFrame()	Requests the browser to call a function to update an animation before the next repaint
resizeBy()	Resizes the window by the specified pixels
resizeTo()	Resizes the window to the specified width and height
scroll()	Deprecated. This method has been replaced by the scrollTo() method.
scrollBy()	Scrolls the document by the specified number of pixels
scrollTo()	Scrolls the document to the specified coordinates
setInterval()	Calls a function or evaluates an expression at specified intervals (in milliseconds)
setTimeout()	Calls a function or evaluates an expression after a specified number of milliseconds
stop()	Stops the window from loading

Источник

JavaScript Window Object

JavaScript Window is a global Interface (object type) which is used to control the browser window lifecycle and perform various operations on it.

A global variable window, which represents the current browser window in which the code is running, is available in our JavaScript code and can be directly accessed by using window literal.

It represents a window containing a webpage which in turn is represented by the document object. A window can be a new window, a new tab, a frame set or individual frame created with JavaScript.

In case of multi tab browser, a window object represents a single tab, but some of its properties like innerHeight , innerWidth and methods like resizeTo() will affect the whole browser window.

Whenever you open a new window or tab, a window object representing that window/tab is automatically created.

The properties of a window object are used to retrieve the information about the window that is currently open, whereas its methods are used to perform specific tasks like opening, maximizing, minimizing the window, etc.

To understand the window object, let’s use it to perform some operations and see how it work.

Using JavaScript Window Object

Let’s use the JavaScript window object to create a new window, using the open() method. This method creates a new window and returns an object which further can be used to manage that window.

In the code above, we have used the window object of the existing window to create a new window using the open() method. In the open() method we can provide the URL to be opened in the new window(we can keep it blank as well), name of the window, the width and the height of the window to be created.

Following is the syntax for the window object open() method:

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

We can provide, as many properties as we want, while creating a new window.

When the open() method is executed, it returns the reference of the window object for the new window created, which you can assign to a variable, like we have done in the code above. We have assigned the value returned by the window.open() method to the win variable.

The we have used the win variable to access the new window, like getting the name of the window, getting location of the window which opened the new window etc.

There are many properties and methods for the window object, which we have listed down below.

Find Dimensions of a Window

We can get the height and width of a window by using the window object built-in properties.

We can also access the document object using a window object( window.document ) which gives us access to the HTML document, hence we can add new HTML element, or write any content to the document, like we did in the example above.

JavaScript Window Object Properties

The wondow object properties refer to the variables created inside the windows object.

In JavaScript, all the available data is attached to the window object as properties.

We can access window object’s properties like: window.propertyname where propertyname is the name of property.

A table of most popular window object properties is given below:

Property	Description
closed	returns a boolean value that specifies whether a window has been closed or not
document	specifies a document object in the window.
history	specifies a history object for the window.
frames	specifies an array of all the frames in the current window
defaultStatus	specifies the default message that has to be appeared in the status bar of Window.
innerHeight	specifies the inner height of the window’s content area.
innerWidth	specifies the inner width of the window’s content area.
length	specifies the number of frames contained in the window.
location	specifies the location object for window
name	specifies the name for the window
top	specifies the reference of the topmost browser window.
self	returns the reference of current active frame or window.
parent	returns the parent frame or window of current window.
status	specifies the message that is displayed in the status bar of the window when an activity is performed on the Window.
screenleft	specifies the x coordinate of window relative to a user’s monitor screen
screenTop	Specifies the y coordinate of window relative to a user’s monitor screen
screenX	specifies the x coordinate for window relative to a user’s monitor screen
screenY	Specifies the y coordinate for window relative to a user’s monitor screen

Let’s take an example to see a few of these properties in action:

In the example above, we have created a new window, just to make you familiar with new window creation and also, to make you understand that when we create a new window, then the current window has a different window object and the new window will have a separate window object.

We have then tried to access some properties of the new window created.

TASK: Try some more windows property in the above code playground to practice and understant how window properties work.

JavaScript Window Object Methods

The window object methods refer to the functions created inside the Window Object, which can be used to perform various actions on the browser window, such as how it displays a message or gets input from the user.

Below we have listed down some of the most commonly used window object methods:

Method	Description
alert()	specifies a method that displays an alert box with a message an OK button.
blur()	specifies a method that removes the focus from the current window.
clearInterval()	specifies a method that clears the timer, which is set by using setInterval() method.
close()	specifies a method that closes the current window.
confirm()	specifies a method that displays a dialogue box with a message and two buttons OK and Cancel
focus()	specifies a method that sets the focus on current window.
open()	specifies a method that opens a new browser window
moveTo()	specifies a method that moves a window to a specified position
moveBy()	specifies a Method that moves a window relative to its current position.
prompt()	specifies a method that prompts for input.
print()	specifies a method that sends a print command to print the content of the current window.
setTimeout()	specifies a method that evaluates an expression after a specified number of milliseconds.
setInterval()	specifies a method that evaluates an expression at specified time intervals (in milliseconds)
resizeBy()	specifies the amount by which the window will be resized
resizeTo()	used for dynamically resizing the window
scroll()	scrolls the window to a particular place in document
scrollBy()	scrolls the window by the given value
stop()	this method stops window loading

Let’s take an example and see a few of the above methods in action:

In the example above, we have used some window methods, you can try more methods. In the next tutorial we will learn about the History object, which is a property of the window object.

Источник