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

The read-only `Window` property **`innerWidth`** returns the interior width of the window in pixels (that is, the width of the window's layout viewport). That includes the width of the vertical scroll bar, if one is present.

Similarly, the interior height of the window (that is, the height of the layout viewport) can be obtained using the `innerHeight` property. That measurement also accounts for the height of the horizontal scroll bar, if it is visible.

Value
-----

 An integer value indicating the width of the window's layout viewport in pixels. This
 property is read-only, and has no default value.

 To change the window's width, use one of the `Window` methods for resizing
 windows, such as `resizeBy()` or
 `resizeTo()`.

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

 If you need to obtain the width of the window minus the scrollbar and borders, use the
 root `<html>` element's `clientWidth`
 property instead.

 The `innerWidth` property is available on any window or object that behaves
 like a window, such as a frame or tab.

Examples
--------


```js
// This will log the width of the viewport
console.log(window.innerWidth);

// This will log the width of the frame viewport within a frameset
console.log(self.innerWidth);

// This will log the width of the viewport of the closest frameset
console.log(parent.innerWidth);

// This will log the width of the viewport of the outermost frameset
console.log(top.innerWidth);
```

Demo
----

### HTML


```html
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
```

### JavaScript


```js
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);
```

### Result

You can also view the results of the demo code in a separate page.

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

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

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

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

See also
--------

* `window.outerWidth`
* `window.innerHeight`
* `window.outerHeight`
Window: showModalDialog() 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.

**Warning:** This feature has been removed. Please fix your websites and applications.

This method was removed in Chrome 43 and Firefox 56.

 The **`Window.showModalDialog()`**
 created and displayed a modal dialog box containing a specified HTML document.

Syntax
------


```js
showModalDialog(uri)
showModalDialog(uri, arguments)
showModalDialog(uri, arguments, options)
```

### Parameters

`uri`

Is the URL of the document to display in the dialog.

`arguments` Optional

 Values passed to the dialog.
 property.


`options` Optional

 A string specifying window ornamentation for the
 dialog, using one or more semicolon delimited values:




| Syntax | Description |
| --- | --- |
| `center: {on | off | yes | no | 1 | 0 }` | 
 If `on`, `yes`, or `1`, the dialog
 window is centered on the desktop; otherwise it's hidden. Default is
 `yes`.
  |
| `dialogheight: *height*` | The height of the dialog box in pixels. |
| `dialogleft: *left*` | Distance of the dialog box from the left edge of the desktop. |
| `dialogwidth: *width*` | The width of the dialog box in pixels. |
| `dialogtop: *top*` | Distance of the dialog box from the top edge of the desktop. |
| `resizable: {on | off | yes | no | 1 | 0 }` | 
 If this argument's value is `on`, `yes`, or 1, the
 dialog window can be resized by the user; otherwise its size is fixed.
 The default value is `no`.
  |
| `scroll: {on | off | yes | no | 1 | 0 }` | 
 If `on`, `yes`, or 1, the dialog window has scroll
 bars; otherwise its size is fixed. Default is `no`.
  |

**Note:** Firefox does not implement the `dialogHide`, `edge`, `status`, or `unadorned` arguments.

### Return value

Holds the `returnValue` property as set by the document specified by `uri`.

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

* MSDN page for `showModalDialog`
Browser compatibility
---------------------

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

See also
--------

* `<dialog>`, a replacement for `window.showModalDialog()`.
* showModalDialog Polyfill
 using a `<dialog>` and generators
Window: messageerror event
==========================

The `messageerror` event is fired on a `Window` object when it receives a message that can't be deserialized.

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("messageerror", (event) => {});

onmessageerror = (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
--------

Listen for `messageerror` using `addEventListener()`:


```js
window.addEventListener("messageerror", (event) => {
  console.error(event);
});
```


The same, but using the `onmessageerror` event handler property:


```js
window.onmessageerror = (event) => {
  console.error(event);
};
```

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

| Specification |
| --- |
| HTML Standard # event-messageerror |
| HTML Standard # handler-window-onmessageerror |

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

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

See also
--------

* `Window.postMessage()`
* Related events: `message`.
Window: toolbar property
========================

Returns the `toolbar` 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-toolbar-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.scrollbars`
* `window.statusbar`
Window: resizeBy() method
=========================

 The **`Window.resizeBy()`** method resizes the current window
 by a specified amount.

Syntax
------


```js
resizeBy(xDelta, yDelta)
```

### Parameters

* `xDelta` is the number of pixels to grow the window horizontally.
* `yDelta` is the number of pixels to grow the window vertically.
### Return value

None (`undefined`).

Examples
--------


```js
// Shrink the window
window.resizeBy(-200, -200);
```

Notes
-----

 This method resizes the window relative to its current size. To resize the window in
 absolute terms, use `window.resizeTo()`.

### Creating and resizing an external window

 For security reasons, it's no longer possible in Firefox for a website to change the
 default size of a window in a browser if the window wasn't created by
 `window.open()`, or contains more than one tab. See the compatibility table
 for details on the change.

 Even if you create window by `window.open()` **it is not resizable by
default.** To make the window resizable, you must open it with the
 `"resizable"` feature.


```js
// Create resizable window
myExternalWindow = window.open(
  "https://example.com",
  "myWindowName",
  "resizable",
);

// Resize window to 500x500
myExternalWindow.resizeTo(500, 500);

// Make window relatively smaller to 400x400
myExternalWindow.resizeBy(-100, -100);
```


 The window you create must respect the Same Origin Policy. If the window you open is
 not in the same origin as the current window, you will not be able to resize, or access
 any information on, that window/tab.

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

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

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

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

`window.prompt()` instructs the browser to display a dialog with an optional message prompting the user to input some text, and to wait until the user either submits the text or cancels the dialog.

Under some conditions — for example, when the user switches tabs — the browser may not actually display a dialog, or may not wait for the user to submit text or to cancel the dialog.

Syntax
------


```js
prompt()
prompt(message)
prompt(message, defaultValue)
```

### Parameters

`message` Optional

 A string of text to display to the user. Can be omitted if there is nothing to show
 in the prompt window.


`defaultValue` Optional

A string containing the default value displayed in the text input field.

### Return value

A string containing the text entered by the user, or `null`.

Examples
--------


```js
let sign = prompt("What's your sign?");

if (sign.toLowerCase() === "scorpio") {
  alert("Wow! I'm a Scorpio too!");
}

// there are many ways to use the prompt feature
sign = window.prompt(); // open the blank prompt window
sign = prompt(); // open the blank prompt window
sign = window.prompt("Are you feeling lucky"); // open the window with Text "Are you feeling lucky"
sign = window.prompt("Are you feeling lucky", "sure"); // open the window with Text "Are you feeling lucky" and default value "sure"
```


 When the user clicks the OK button, text entered in the input field is returned. If the
 user clicks OK without entering any text, an empty string is returned. If the user
 clicks the Cancel button, this function returns `null`.

The above prompt appears as follows (in Chrome on macOS):

![prompt() dialog in Chrome on macOS](/en-US/docs/Web/API/Window/prompt/prompt.png)

Notes
-----

 A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and
 returns the (possibly empty) text the user entered into that textbox.

 Please note that result is a string. That means you should sometimes cast the value
 given by the user. For example, if their answer should be a Number, you should cast the
 value to Number.


```js
const aNumber = Number(window.prompt("Type a number", ""));
```


 Dialog boxes are modal windows; they
 prevent the user from accessing the rest of the program's interface until the dialog box
 is closed. For this reason, you should not overuse any function that creates a dialog
 box (or modal window).

Alternatively `<dialog>` element can be used to take user inputs.

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

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

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

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

See also
--------

* `<dialog>` element
* `alert`
* `confirm`
Window: focus event
===================

The **`focus`** event fires when an element has received focus.

The opposite of `focus` is `blur`.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A `FocusEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

FocusEventEvent properties
----------------

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

`FocusEvent.relatedTarget`

An `EventTarget` representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to `null` for security reasons.

Examples
--------

### Live example

This example changes the appearance of a document when it loses focus. It uses `addEventListener()` to monitor `focus` and `blur` events.

#### HTML


```html
<p id="log">Click on this document to give it focus.</p>
```


#### CSS


```css
.paused {
  background: #ddd;
  color: #555;
}
```


#### JavaScript


```js
function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

const log = document.getElementById("log");

window.addEventListener("blur", pause);
window.addEventListener("focus", play);
```


#### Result

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

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

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

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

See also
--------

* Related event: `blur`
* This event on `Element` targets: `focus` event
Window: vrdisplayconnect 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.

**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 **`vrdisplayconnect`** event of the WebVR API is fired when a compatible VR display is connected to the computer.

**Note:** This event was part of the old WebVR API. It has been superseded by the WebXR Device API.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A `VRDisplayEvent`. Inherits from `Event`.

Event properties
----------------

*`VRDisplayEvent` also inherits properties from its parent object, `Event`.*

`VRDisplayEvent.display` 
Deprecated
 Read only 

The `VRDisplay` associated with this event.

`VRDisplayEvent.reason` 
Deprecated
 Read only 

A human-readable reason why the event was fired.

Examples
--------

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


```js
window.addEventListener("vrdisplayconnect", () => {
  info.textContent = "Display connected.";
  reportDisplays();
});
```


Or use the `onvrdisplayconnect` event handler property:


```js
window.onvrdisplayconnect = () => {
  info.textContent = "Display connected.";
  reportDisplays();
};
```

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

This event was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR Device API, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

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

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

See also
--------

* WebVR API
Window: moveTo() method
=======================

 The **`moveTo()`** method of the `Window`
 interface moves the current window to the specified coordinates.


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


Syntax
------


```js
moveTo(x, y)
```

### Parameters

* `x` is the horizontal coordinate to be moved to.
* `y` is the vertical coordinate to be moved to.
### Return value

None (`undefined`).

Examples
--------

This example moves the window to the top-left corner of the screen.


```js
function origin() {
  window.moveTo(0, 0);
}
```

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

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

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.moveBy()`
Window: beforeprint event
=========================

The **`beforeprint`** event is fired when the associated document is about to be printed or previewed for printing.

The `afterprint` and `beforeprint` events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then revert those changes after printing has completed. In general, you should prefer the use of a `@media print` CSS at-rule, but it may be necessary to use these events in some cases.

Syntax
------

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


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

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

A generic `Event`.

Examples
--------

Using `addEventListener()`:


```js
window.addEventListener("beforeprint", (event) => {
  console.log("Before print");
});
```


Using the `onbeforeprint` event handler property:


```js
window.onbeforeprint = (event) => {
  console.log("Before print");
};
```

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

| Specification |
| --- |
| HTML Standard # event-beforeprint |
| HTML Standard # handler-window-onbeforeprint |

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

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

See also
--------

* Related events: `afterprint`
Window: sizeToContent() 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.

 The **`Window.sizeToContent()`** method sizes the window
 according to its content. In order for it to work, the DOM content should be loaded when
 this function is called—for example, once the `DOMContentLoaded` event has
 been thrown.

 Since Firefox 20, the minimal size of the window is clamped to prevent the window from
 being too small for the user to interact with.

Syntax
------


```js
sizeToContent()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
window.sizeToContent();
```

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

This feature is not part of any specification.

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

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

See also
--------

* `Window`
Window: stop() method
=====================

 The **`window.stop()`** stops further resource loading in the current
 browsing context, equivalent to the stop button in the browser.

 Because of how scripts are executed, this method cannot interrupt its parent
 document's loading, but it will stop its images, new windows, and other still-loading
 objects.

Syntax
------


```js
stop()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
window.stop();
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: updateCommands() 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.

Updates the state of commands of the current chrome window (UI).

Syntax
------


```js
updateCommands("sCommandName")
```

### Parameters

* `sCommandName` is a particular string which describes what kind of update event this is (e.g. whether we are in bold right now).
### Return value

None (`undefined`).

Notes
-----

This enables or disables items (setting or clearing the "disabled" attribute on the command node as appropriate), or ensures that the command state reflects the state of the selection by setting current state information in the "state" attribute of the XUL command nodes.

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

DOM Level 0. Not part of specification.

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

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

The **`visualViewport`** read-only property of the `Window` interface returns a `VisualViewport` object representing the visual viewport for a given window, or `null` if current document is not fully active.

Value
-----

A `VisualViewport` object.

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

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

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

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