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

Returns the `scrollbars` object.

This is one of a group of `Window` properties that contain a boolean `visible` property, that used to represent whether or not a particular part of a web browser's user interface was visible.

For privacy and interoperability reasons, the value of the `visible` property is now `false` if this `Window` is a popup, and `true` otherwise.

Value
-----

An object containing a single property:

`visible` Read only 

A boolean property, `false` if this `Window` is a popup, and `true` otherwise.

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

| Specification |
| --- |
| HTML Standard # dom-window-scrollbars-dev |

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

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

See also
--------

* `window.locationbar`
* `window.menubar`
* `window.personalbar`
* `window.statusbar`
* `window.toolbar`
Window: unhandledrejection event
================================

The **`unhandledrejection`** event is sent to the global scope of a script when a JavaScript `Promise` that has no rejection handler is rejected; typically, this is the `window`, but may also be a `Worker`.

This is useful for debugging and for providing fallback error handling for unexpected situations.

Syntax
------

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


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

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

A `PromiseRejectionEvent`. Inherits from `Event`.

Event

PromiseRejectionEventEvent properties
----------------

`PromiseRejectionEvent.promise` Read only 

The JavaScript `Promise` that was rejected.

`PromiseRejectionEvent.reason` Read only 

A value or `Object` indicating why the promise was rejected, as passed to `Promise.reject()`.

Event handler aliases
---------------------

In addition to the `Window` interface, the event handler property `onunhandledrejection` is also available on the following targets:

* `HTMLBodyElement`
* `HTMLFrameSetElement`
* `SVGSVGElement`
Usage notes
-----------

Allowing the `unhandledrejection` event to bubble will eventually result in an error message being output to the console. You can prevent this by calling `preventDefault()` on the `PromiseRejectionEvent`; see Preventing default handling below for an example.

Because this event can leak data, `Promise` rejections that originate from a cross-origin script won't fire this event.

Examples
--------

### Basic error logging

This example logs information about the unhandled promise rejection to the console.


```js
window.addEventListener("unhandledrejection", (event) => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});
```


You can also use the `onunhandledrejection` event handler property to set up the event listener:


```js
window.onunhandledrejection = (event) => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
};
```

### Preventing default handling

Many environments (such as Node.js) report unhandled promise rejections to the console by default. You can prevent that from happening by adding a handler for `unhandledrejection` events that—in addition to any other tasks you wish to perform—calls `preventDefault()` to cancel the event, preventing it from bubbling up to be handled by the runtime's logging code. This works because `unhandledrejection` is cancelable.


```js
window.addEventListener("unhandledrejection", (event) => {
  // code for handling the unhandled rejection
  // …

  // Prevent the default handling (such as outputting the
  // error to the console)

  event.preventDefault();
});
```

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

| Specification |
| --- |
| HTML Standard # event-unhandledrejection |
| HTML Standard # handler-window-onunhandledrejection |

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

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

See also
--------

* Promise rejection events
* `rejectionhandled` event
* `Promise`
Window: orientationchange event
===============================

**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 `orientationchange` event is fired when the orientation of the device has changed.

This event is not cancelable and does not bubble.

This event is deprecated. Listen for the `change` event of the `ScreenOrientation` interface instead.

Syntax
------

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


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

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

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

A generic `Event`.

Example
-------

You can use the `orientationchange` event in an `addEventListener` method:


```js
window.addEventListener("orientationchange", (event) => {
  console.log(
    `the orientation of the device is now ${event.target.screen.orientation.angle}`,
  );
});
```


Or use the `onorientationchange` event handler property:


```js
window.onorientationchange = (event) => {
  console.log(
    `the orientation of the device is now ${event.target.screen.orientation.angle}`,
  );
};
```

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

| Specification |
| --- |
| Compatibility Standard # event-orientationchange |

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

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

Returns the `menubar` object.

This is one of a group of `Window` properties that contain a boolean `visible` property, that used to represent whether or not a particular part of a web browser's user interface was visible.

For privacy and interoperability reasons, the value of the `visible` property is now `false` if this `Window` is a popup, and `true` otherwise.

Value
-----

An object containing a single property:

`visible` Read only 

A boolean property, `false` if this `Window` is a popup, and `true` otherwise.

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

| Specification |
| --- |
| HTML Standard # dom-window-menubar-dev |

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

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

See also
--------

* `window.locationbar`
* `window.personalbar`
* `window.scrollbars`
* `window.statusbar`
* `window.toolbar`
Window: scrollMaxY property
===========================

**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 **`Window.scrollMaxY`** read-only property returns the
 maximum number of pixels that the document can be scrolled vertically.

Value
-----

A number.

Examples
--------


```js
// Scroll to the bottom of the page
let maxY = window.scrollMaxY;

window.scrollTo(0, maxY);
```

Notes
-----

 Do not use this property to get the total document height, which is not equivalent to
 `window.innerHeight` + window.scrollMaxY, because
 `window.innerHeight` includes the width of any visible horizontal
 scrollbar, thus the result would exceed the total document height by the width of any
 visible horizontal scrollbar. Instead use
 `document.body.scrollHeight`. See also
 `window.scrollMaxX` and `window.scrollTo`.

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: gamepadconnected event
==============================

The `gamepadconnected` event is fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.

The event will not fire if disallowed by the document's `gamepad` Permissions Policy.

This event is not cancelable and does not bubble.

Examples
--------

To be informed when a gamepad is connected, you can add a handler to the window using `addEventListener()`, like this:


```js
window.addEventListener("gamepadconnected", (event) => {
  // All buttons and axes values can be accessed through
  const gamepad = event.gamepad;
});
```


Alternatively, you can use the `window.ongamepadconnected` event handler property to establish a handler for the `gamepadconnected` event:


```js
window.ongamepadconnected = (event) => {
  // All buttons and axes values can be accessed through
  const gamepad = event.gamepad;
};
```

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

| Specification |
| --- |
| Gamepad # event-gamepadconnected |

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

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

See also
--------

* gamepaddisconnected
* Using Gamepad API
Window: resizeTo() method
=========================

 The **`Window.resizeTo()`** method dynamically resizes the
 window.

Syntax
------


```js
resizeTo(width, height)
```

### Parameters

`width`

 An integer representing the new `outerWidth` in
 pixels (including scroll bars, title bars, etc.).


`height`

 An integer value representing the new
 `outerHeight` in pixels (including scroll bars,
 title bars, etc.).


### Return value

None (`undefined`).

Examples
--------

 This function resizes the window so that it takes up one quarter of the available
 screen. See the `Screen.availWidth` and `Screen.availHeight`
 properties.


```js
function quarter() {
  window.resizeTo(window.screen.availWidth / 2, window.screen.availHeight / 2);
}
```

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

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

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

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

 Note: It's not possible to resize a window or tab that wasn't created by
 **`window.open()`**. It's also not possible to resize when the
 window has multiple tabs.

See also
--------

* `window.resizeBy()`
Window: find() 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.

**Note:** Support for `Window.find()` might change in future
 versions of Gecko. See Firefox bug 672395.


The **`Window.find()`** method finds a string in a window sequentially.

Syntax
------


```js
find(aString, aCaseSensitive, aBackwards, aWrapAround, aWholeWord, aSearchInFrames, aShowDialog)
```

### Parameters

`aString`

The text string for which to search.

`aCaseSensitive`

A boolean value. If `true`, specifies a case-sensitive search.

`aBackwards`

A boolean value. If `true`, specifies a backward search.

`aWrapAround`

A boolean value. If `true`, specifies a wrap around search.

`aWholeWord` Unimplemented

A boolean value. If `true`, specifies a whole word search. This is not implemented; see Firefox bug 481513.

`aSearchInFrames`

A boolean value. If `true`, specifies a search in frames.

### Return value

`true` if the string is found; otherwise, `false`.

Examples
--------

### JavaScript


```js
function findString(text) {
  document.querySelector("#output").textContent = `String found? ${window.find(
 text,
 )}`;
}
```

### HTML


```html
<p>Apples, Bananas, and Oranges.</p>
<button type="button" onClick='findString("Apples")'>Search for Apples</button>
<button type="button" onClick='findString("Bananas")'>
  Search for Bananas
</button>
<button type="button" onClick='findString("Orange")'>Search for Orange</button>

<p id="output"></p>
```

### Result

Notes
-----

 In some browsers, `Window.find()` selects (highlights) the found content on
 the site.

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: matchMedia() method
===========================

 The `Window` interface's **`matchMedia()`** method
 returns a new `MediaQueryList` object that can then be used to determine if
 the `document` matches the media query string,
 as well as to monitor the document to detect when it matches (or stops matching) that
 media query.

Syntax
------


```js
matchMedia(mediaQueryString)
```

### Parameters

`mediaQueryString`

A string specifying the media query to parse into a `MediaQueryList`.

### Return value

 A new `MediaQueryList` object for the media query. Use this object's
 properties and events to detect matches and to monitor for changes to those matches over
 time.

Usage notes
-----------

 You can use the returned media query to perform both instantaneous and event-driven
 checks to see if the document matches the media query.

 To perform a one-time, instantaneous check to see if the document matches the media
 query, look at the value of the `matches`
 property, which will be `true` if the document meets the media query's
 requirements.

 If you need to be kept aware of whether or not the document matches the media query at
 all times, you can instead watch for the `change` event to be delivered to the object. There's a good example of this
 in the article on `Window.devicePixelRatio`.

Examples
--------

 This example runs the media query `(max-width: 600px)` and displays the
 value of the resulting `MediaQueryList`'s `matches` property in a
 `<span>`; as a result, the output will say "true" if the viewport is less
 than or equal to 600 pixels wide, and will say "false" if the window is wider than that.

### JavaScript


```js
let mql = window.matchMedia("(max-width: 600px)");

document.querySelector(".mq-value").innerText = mql.matches;
```


 The JavaScript code passes the media query to match into `matchMedia()` to compile it, then sets the `<span>`'s
 `innerText` to the value of the results'
 `matches` property, so that it indicates whether or
 not the document matches the media query at the moment the page was loaded.

### HTML


```html
<span class="mq-value"></span>
```


A simple `<span>` to receive the output.
```

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #88f;
  padding: 0.4em;
  border: 1px solid #dde;
}
```

### Result

See Testing media queries programmatically for additional code examples.

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

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

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

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

See also
--------

* Media queries
* Using media queries from code
* `MediaQueryList`
Window: documentPictureInPicture property
=========================================

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

 The **`documentPictureInPicture`** read-only property of the
 `Window` interface returns a reference to the `DocumentPictureInPicture` object for the current document context.

Value
-----

A `DocumentPictureInPicture` object instance.

Examples
--------


```js
const videoPlayer = document.getElementById("player");

// ...

// Open a Picture-in-Picture window.
await window.documentPictureInPicture.requestWindow({
  width: videoPlayer.clientWidth,
  height: videoPlayer.clientHeight,
});

// ...
```

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

| Specification |
| --- |
| Document Picture-in-Picture Specification # dom-window-documentpictureinpicture |

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

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

See also
--------

* Document Picture-in-Picture API
* Using the Document Picture-in-Picture API
Window: credentialless property
===============================

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

The **`window.credentialless`** read-only property returns a boolean that indicates whether the current document was loaded inside a credentialless `<iframe>`, meaning that it is loaded in a new, ephemeral context.

This context doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the `Cross-Origin-Embedder-Policy` (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not.

See IFrame credentialless for a deeper explanation.

Value
-----

A boolean. A value of `true` indicates that the document was loaded inside a credentialless `<iframe>`; `false` indicates that it was not.

Examples
--------

You can specify a credentialless `<iframe>` like so:


```html
<iframe
 src="https://en.wikipedia.org/wiki/Spectre\_(security\_vulnerability)"
 title="Spectre vulnerability Wikipedia page"
 width="960"
 height="600"
 credentialless></iframe>
```


In supporting browsers, if the document loaded in the `<iframe>` were to run the following line, it would return `true`:


```js
console.log(window.credentialless);
```

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

| Specification |
| --- |
| Iframe credentialless # dom-window-credentialless |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: moveBy() method
=======================

 The **`moveBy()`** method of the `Window`
 interface moves the current window by a specified amount.


**Note:** This function moves the window relative to its current
 location. In contrast, `window.moveTo()` moves the window to an absolute
 location.


Syntax
------


```js
moveBy(deltaX, deltaY)
```

### Parameters

* `deltaX` is the amount of pixels to move the window horizontally.
 Positive values are to the right, while negative values are to the left.
* `deltaY` is the amount of pixels to move the window vertically. Positive
 values are down, while negative values are up.
### Return value

None (`undefined`).

Examples
--------

This example moves the window 10 pixels to the right and 10 pixels up.


```js
function budge() {
  moveBy(10, -10);
}
```

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

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

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

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

As of Firefox 7, websites can no longer move a browser window in the following cases:

1. You can't move a window or tab that wasn't created by `Window.open()`.
2. You can't move a window or tab when it's in a window with more than one tab.
See also
--------

* `Window.moveTo()`
Window: speechSynthesis property
================================

The `speechSynthesis` read-only property of the Window object returns a `SpeechSynthesis` object, which is the entry point into using Web Speech API speech synthesis functionality.

Value
-----

A `SpeechSynthesis` object.

Examples
--------

 In our basic Speech synthesizer demo, we first grab a reference to the SpeechSynthesis controller using `window.speechSynthesis`.
 After defining some necessary variables, we retrieve a list of the voices available using `SpeechSynthesis.getVoices()` and populate a select menu with them so the user can choose what voice they want.

Inside the `inputForm.onsubmit` handler, we stop the form submitting with preventDefault(), create a new `SpeechSynthesisUtterance` instance containing the text from the text `<input>`, set the utterance's voice to the voice selected in the `<select>` element, and start the utterance speaking via the `SpeechSynthesis.speak()` method.


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

function populateVoiceList() {
  voices = synth.getVoices();

  for (const voice of voices) {
    const option = document.createElement("option");
    option.textContent = `${voice.name} (${voice.lang})`;

    if (voice.default) {
      option.textContent += " — DEFAULT";
    }

    option.setAttribute("data-lang", voice.lang);
    option.setAttribute("data-name", voice.name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  utterThis.voice = voices.find((v) => v.name === selectedOption);
  synth.speak(utterThis);
  inputTxt.blur();
};
```

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

| Specification |
| --- |
| Web Speech API # tts-section |

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

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

See also
--------

* Web Speech API
Window: webkitConvertPointFromPageToNode() 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.

 Given a `WebKitPoint` specified in the page's coordinate system, the
 `Window` method **`webkitConvertPointFromPageToNode()`**
 returns a `Point` object specifying the same location in the coordinate
 system of the specified DOM `Node`.


**Warning:** Please review the Browser compatibility section before using this method,
 as it's not widely supported (nor is the `WebKitPoint` object it uses).


Syntax
------


```js
convertPointFromPageToNode(node, pagePoint)
```

### Parameters

`node`

The `Node` into whose coordinate system the point is to be converted.

`pagePoint`

 A `WebKitPoint` object specifying a point in the coordinate system of the
 page, which is to be converted into the node's coordinate system.


### Return value

 A `Point` object describing the specified location in the node's coordinate
 system.

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

 This method was specified in the defunct 20 March 2009 Working Draft of CSS 2D Transforms Module Level 3. It is not present in the
 current CSS Transforms Module Level 1 Working Draft.

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

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

See also
--------

* `Window.webkitConvertPointFromNodeToPage`
* Mozilla implementation bug: Firefox bug 850808
* `webkitConvertPointFromPageToNode` documentation at IE Dev Center