recursal/MDN huggingface dataset:
Window: outerHeight property
============================

The **`Window.outerHeight`** read-only property returns the height in pixels of the whole browser window, including any sidebar, window chrome, and window-resizing borders/handles.

Notes
-----

To change the size of a window, see `window.resizeBy()` and `window.resizeTo()`.

To get the inner height of a window, i.e. the height of the page being displayed, see `window.innerHeight`.

### Graphical example

The following figure shows the difference between `outerHeight` and `innerHeight`.

![innerHeight vs. outerHeight illustration](/en-US/docs/Web/API/Window/outerHeight/firefoxinnervsouterheight2.png)

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-window-outerheight |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `window.innerHeight`
* `window.innerWidth`
* `window.outerWidth`
* `window.resizeBy()`
* `window.resizeTo()`
Window: requestIdleCallback() method
====================================

 The **`window.requestIdleCallback()`** method queues a function
 to be called during a browser's idle periods. This enables developers to perform
 background and low priority work on the main event loop, without impacting
 latency-critical events such as animation and input response. Functions are generally
 called in first-in-first-out order; however, callbacks which have a `timeout`
 specified may be called out-of-order if necessary in order to run them before the
 timeout elapses.

 You can call `requestIdleCallback()` within an idle callback function to
 schedule another callback to take place no sooner than the next pass through the event
 loop.


**Note:** A `timeout` option is strongly recommended for required work,
 as otherwise it's possible multiple seconds will elapse before the callback is fired.


Syntax
------


```js
requestIdleCallback(callback)
requestIdleCallback(callback, options)
```

### Parameters

`callback`

 A reference to a function that should be called in the near future, when the event
 loop is idle. The callback function is passed an `IdleDeadline` object
 describing the amount of time available and whether or not the callback has been run
 because the timeout period expired.


`options` Optional

Contains optional configuration parameters. Currently only one property is defined:

`timeout`

If the number of milliseconds represented by this parameter has elapsed and the callback has not already been called, then a task to execute the callback is queued in the event loop (even if doing so risks causing a negative performance impact). `timeout` must be a positive value or it is ignored.


### Return value

 An ID which can be used to cancel the callback by passing it into the
 `window.cancelIdleCallback()` method.

Examples
--------

 See our complete example
 in the article Cooperative Scheduling of Background Tasks API.

Specifications
--------------

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-requestidlecallback-method |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `window.cancelIdleCallback()`
* `IdleDeadline`
* `setTimeout()`
* `setInterval()`
* `window.requestAnimationFrame`
Window: releaseEvents() method
==============================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Releases the window from trapping events of a specific type.

Syntax
------


```js
releaseEvents(eventType)
```

### Parameters

`eventType`

`eventType` is a combination of the following values:
 `Event.ABORT`, `Event.BLUR`, `Event.CLICK`,
 `Event.CHANGE`, `Event.DBLCLICK`, `Event.DRAGDDROP`,
 `Event.ERROR`, `Event.FOCUS`, `Event.KEYDOWN`,
 `Event.KEYPRESS`, `Event.KEYUP`, `Event.LOAD`,
 `Event.MOUSEDOWN`, `Event.MOUSEMOVE`, `Event.MOUSEOUT`,
 `Event.MOUSEOVER`, `Event.MOUSEUP`, `Event.MOVE`,
 `Event.RESET`, `Event.RESIZE`, `Event.SELECT`,
 `Event.SUBMIT`, `Event.UNLOAD`.


### Return value

None (`undefined`).

Examples
--------


```js
window.releaseEvents(Event.KEYPRESS);
```

Notes
-----

 Note that you can pass a list of events to this method using the following syntax:
 `window.releaseEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)`.

 See also `window.captureEvents`
 (
Deprecated
).

Specifications
--------------

This is not part of any specification.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: message event
=====================

The `message` event is fired on a `Window` object when the window receives a message, for example from a call to `Window.postMessage()` from another browsing context.

This event is not cancellable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("message", (event) => {});

onmessage = (event) => {};
```

Event type
----------

A `MessageEvent`. Inherits from `Event`.

Event

MessageEventEvent properties
----------------

*This interface also inherits properties from its parent, `Event`.*

`MessageEvent.data` Read only 

The data sent by the message emitter.

`MessageEvent.origin` Read only 

A string representing the origin of the message emitter.

`MessageEvent.lastEventId` Read only 

A string representing a unique ID for the event.

`MessageEvent.source` Read only 

A `MessageEventSource` (which can be a WindowProxy, `MessagePort`, or `ServiceWorker` object) representing the message emitter.

`MessageEvent.ports` Read only 

An array of `MessagePort` objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).

Examples
--------

Suppose a script sends a message to a different browsing context, such as another `<iframe>`, using code like this:


```js
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const windowMessageButton = document.querySelector("#window-message");

windowMessageButton.addEventListener("click", () => {
  targetFrame.postMessage("hello there", targetOrigin);
});
```


The receiver can listen for the message using `addEventListener()` with code like this:


```js
window.addEventListener("message", (event) => {
  console.log(`Received message: ${event.data}`);
});
```


Alternatively the listener could use the `onmessage` event handler property:


```js
window.onmessage = (event) => {
  console.log(`Received message: ${event.data}`);
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-window-onmessage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related events: `messageerror`.
* `Window.postMessage()`.
Window: back() method
=====================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The obsolete and non-standard method `back()` on the `window`
 interface returns the window to the previous item in the history. This was a
 Firefox-specific method and was removed in Firefox 31.

**Note:** Use the standard `history.back` method instead.

Syntax
------


```js
back()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

This simple example handles a click on a "Back" button by calling `back()`.


```js
function handleMyBackButton() {
  if (canGoBack) {
    window.back();
  }
}
```

Specifications
--------------

This is not part of any specification.

Browser compatibility
---------------------

 This non-standard method was only implemented in Firefox, and was removed in Firefox
 31.

See also
--------

* `History.back()`
* `History.forward()`
Window: scrollY property
========================

 The read-only **`scrollY`** property
 of the `Window` interface returns the number of pixels that the document
 is currently scrolled vertically.

 This value is subpixel precise in modern
 browsers, meaning that it isn't necessarily a whole number. You can get the number of
 pixels the document is scrolled horizontally from the `scrollX` property.

Value
-----

 In practice, the returned value is a double-precision floating-point value with the range of
 2^(-1022) to 2^(+1023). It indicates the number of pixels the document is currently scrolled
 vertically from the origin, where a positive value means the content is scrolled to upward.
 If the document is rendered on a subpixel-precise device, then the returned value is also
 subpixel-precise and may contain a decimal component. If the document isn't scrolled at all
 up or down, then `scrollY` is 0.

**Note:** If you need an integer value, you can use `Math.round()` to round it off.

 In more technical terms, `scrollY` returns the Y coordinate of the top edge
 of the current viewport. If there is no viewport, the returned value is
 0.

Examples
--------


```js
// make sure and go down to the second page
if (window.scrollY) {
  window.scroll(0, 0); // reset the scroll position to the top left of the document.
}

window.scrollByPages(1);
```

Notes
-----

 Use this property to check that the document hasn't already been scrolled when using
 relative scroll functions such as `scrollBy()`,
 `scrollByLines()`, or
 `scrollByPages()`.

 The `pageYOffset` property is an alias for the `scrollY`
 property:


```js
window.pageYOffset === window.scrollY; // always true
```

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-window-scrolly |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `window.scrollX`
Window: scrollBy() method
=========================

 The **`Window.scrollBy()`** method scrolls the document in the
 window by the given amount.

Syntax
------


```js
scrollBy(x-coord, y-coord)
scrollBy(options)
```

### Parameters

* `x-coord` is the horizontal pixel value that you want to scroll by.
* `y-coord` is the vertical pixel value that you want to scroll by.

- or -

`options`

A dictionary containing the following parameters:

`top`

Specifies the number of pixels along the Y axis to scroll the window or element.

`left`

Specifies the number of pixels along the X axis to scroll the window or element.

`behavior`

Specifies whether the scrolling should animate smoothly (`smooth`), happen instantly in a single jump (`instant`), or let the browser choose (`auto`, default).


### Return value

None (`undefined`).

Examples
--------

To scroll down one page:


```js
window.scrollBy(0, window.innerHeight);
```


To scroll up:


```js
window.scrollBy(0, -window.innerHeight);
```


Using `options`:


```js
window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

Notes
-----

`window.scrollBy()` scrolls by a particular amount, whereas
 `window.scroll()` scrolls to an absolute position in the document. See also
 `window.scrollByLines()` and `window.scrollByPages()`.

Specifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-window-scrollby |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: orientation property
============================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Returns the orientation in degrees (in 90-degree increments) of the viewport relative to the device's natural orientation.

Its only possible values are `-90`, `0`, `90`, and `180`. Positive values are counterclockwise; negative values are clockwise.

This property is deprecated. Use the `Screen.orientation` property instead, available on the `window.screen` property.

Specifications
--------------

| Specification |
| --- |
| Compatibility Standard # dfn-window-orientation-angle |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: frames property
=======================

 Returns the window itself, which is an array-like object, listing the direct sub-frames
 of the current window.

Value
-----

 A list of frame objects. It is similar to an
 array in that it has a `length` property and its items can be accessed
 using the `[i]` notation.

* `frameList === window` evaluates to true.
* Each item in the `window.frames` pseudo-array represents the `Window`
 object corresponding to the given `<frame>`'s or
 `<iframe>`'s content, not the `frame` or `iframe` DOM element (i.e.,
 `window.frames[0]` is the same thing as
 `document.getElementsByTagName("iframe")[0].contentWindow`).
* For more details about the returned value, refer to this thread on mozilla.dev.platform.
Examples
--------


```js
const frames = window.frames; // or const frames = window.parent.frames;
for (let i = 0; i < frames.length; i++) {
  // do something with each subframe as frames[i]
  frames[i].document.body.style.background = "red";
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-frames-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: customElements property
===============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`customElements`** read-only property of the `Window` interface returns a reference to the `CustomElementRegistry` object, which can be used to register new custom elements and get information about previously registered custom elements.

Examples
--------

The most common example you'll see of this property being used is to get access to the `CustomElementRegistry.define()` method to define and register a new custom element, e.g.:


```js
let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);
```


However, it is usually shortened to something like the following:


```js
customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById(
        "element-details-template",
      ).content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        template.cloneNode(true),
      );
    }
  },
);
```


See our web-components-examples repo for more usage examples.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-window-customelements |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: self property
=====================

The **`Window.self`** read-only property returns the window itself, as a WindowProxy. It can be used with dot notation on a `window` object (that is, `window.self`) or standalone (`self`). The advantage of the standalone notation is that a similar notation exists for non-window contexts, such as in Web Workers. By using `self`, you can refer to the global scope in a way that will work not only in a window context (`self` will resolve to `window.self`) but also in a worker context (`self` will then resolve to `WorkerGlobalScope.self`).

Value
-----

A WindowProxy object.

Examples
--------

Uses of `window.self` like the following could just as well be replaced by `window`.


```js
if (window.parent.frames[0] !== window.self) {
  // this window is not the first frame in the list
}
```


Furthermore, when executing in the active document of a browsing context, `window` is a reference to the current global object and thus all of the following are equivalent:


```js
const w1 = window;
const w2 = self;
const w3 = window.window;
const w4 = window.self;
// w1, w2, w3, w4 all strictly equal, but only w2 will function in workers
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-self-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Its `Worker` equivalent, `WorkerGlobalScope.self`.
Window: console property
========================

The **`Window.console`** property returns a reference to the `console` object, which provides methods for logging information to the browser's console. These methods are intended for debugging purposes only and should not be relied on for presenting information to end users.

Examples
--------

### Logging to console

The first example logs text to the console.


```js
console.log("An error occurred while loading the content");
```


The next example logs an object to the console, with the object's fields expandable using disclosure widgets:


```js
console.dir(someObject);
```


For more examples, see the Examples section of the `console` article.

Specifications
--------------

| Specification |
| --- |
| Console Standard  |

**Note:** Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another.
Window: originAgentCluster property
===================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`originAgentCluster`** read-only property of the `Window` interface returns `true` if this window belongs to an *origin-keyed agent cluster*: this means that the operating system has provided dedicated resources (for example an operating system process) to this window's origin that are not shared with windows from other origins.

Otherwise this property returns `false`.

Windows that are part of an origin-keyed agent cluster are subjects to some additional restrictions, compared with windows that are not. In particular, they cannot:

* Set `Document.domain`, which is a legacy feature that normally allows same-site cross-origin pages to synchronously access each other's DOM.
* Send `WebAssembly.Module` objects to other same-site cross-origin pages via `Window.postMessage()`.
* Send `SharedArrayBuffer` or `WebAssembly.Memory` objects to other same-site cross-origin pages.

To request that the browser assign this window to an origin-keyed agent cluster, the server must send the `Origin-Agent-Cluster` response header.

Note that the origin-keyed agent cluster feature is only supported in secure contexts. If a site is not a secure context, the `window.originAgentCluster` will always return `false`.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # origin-keyed-agent-clusters |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Origin-Agent-Cluster` HTTP response header
* Requesting performance isolation with the Origin-Agent-Cluster header
Window: requestFileSystem() method
==================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The non-standard `Window` method
 **`requestFileSystem()`** method is a Google Chrome-specific
 method which lets a website or app gain access to a sandboxed file system for its own
 use. The returned `FileSystem` is then available for use with the other file system APIs.

**Note:** This method is prefixed with `webkit` in all browsers that implement it.

Syntax
------


```js
requestFileSystem(type, size, successCallback)
requestFileSystem(type, size, successCallback, errorCallback)
```

### Parameters

`type`

 The type of storage to request. Specify `Window.TEMPORARY` if it's
 acceptable for the browser to delete the files at its own discretion, such as if
 storage space runs low, or `Window.PERSISTENT` if you need the files to
 remain in place unless the user or the website or app explicitly permit it.
 Persistent storage requires that the user grant the site quota.


`size`

The amount of storage space you wish to have allocated for your app's use.

`successCallback`

 A function which is invoked when the file system has been successfully obtained. The
 callback receives a single parameter: a `FileSystem` object representing
 the file system the app has permission to use.


`errorCallback` Optional

 An optional parameter specifying a function which is called if an error occurs while
 attempting to obtain the file system, or if the user denies permission to create or
 access the file system. The callback receives as input a single parameter: a
 `FileError` object describing the error.


### Return value

None (`undefined`).

Specifications
--------------

As this method was removed from the File and Directory Entries API proposal, it has no official W3C or WHATWG specification. It is no longer on track to become a standard.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* File and Directory Entries API support in Firefox