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

 The **`Window.screenX`** read-only property returns the
 horizontal distance, in CSS pixels, of the left border of the user's browser viewport to
 the left side of the screen.


**Note:** An alias of `screenX` was implemented across modern
 browsers in more recent times — `Window.screenLeft`. This was originally
 supported only in IE but was introduced everywhere due to popularity.


Value
-----

 A number equal to the number of CSS pixels from the left edge of the browser viewport
 to the left edge of the screen.

Examples
--------

 In our screenleft-screentop (source code) example, you'll see a canvas onto which has been drawn a circle. In this
 example we are using `Window.screenLeft`/`Window.screenTop`
 plus `Window.requestAnimationFrame()` to constantly redraw the circle in
 the same physical position on the screen, even if the window position is moved.


```js
initialLeft = window.screenLeft + canvasElem.offsetLeft;
initialTop = window.screenTop + canvasElem.offsetTop;

function positionElem() {
  let newLeft = window.screenLeft + canvasElem.offsetLeft;
  let newTop = window.screenTop + canvasElem.offsetTop;

  let leftUpdate = initialLeft - newLeft;
  let topUpdate = initialTop - newTop;

  ctx.fillStyle = "rgb(0 0 0)";
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = "rgb(0 0 255)";
  ctx.beginPath();
  ctx.arc(
    leftUpdate + width / 2,
    topUpdate + height / 2 + 35,
    50,
    degToRad(0),
    degToRad(360),
    false,
  );
  ctx.fill();

  pElem.textContent = `Window.screenLeft: ${window.screenLeft}, Window.screenTop: ${window.screenTop}`;

  window.requestAnimationFrame(positionElem);
}

window.requestAnimationFrame(positionElem);
```


These work in exactly the same way as `screenX`/`screenY`.

 Also in the code we include a snippet that detects whether `screenLeft` is
 supported, and if not, polyfills in `screenLeft`/`screenTop` using
 `screenX`/`screenY`.


```js
if (!window.screenLeft) {
  window.screenLeft = window.screenX;
  window.screenTop = window.screenY;
}
```

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

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

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

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

See also
--------

* `window.screenLeft`
* `Window.screenY`
Window: blur event
==================

The **`blur`** event fires when an element has lost focus.

The opposite of `blur` is `focus`.

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

onblur = (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-blur |
| HTML Standard # handler-onblur |

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

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

The value of `Document.activeElement` varies across browsers while this event is being handled (Firefox bug 452307): IE10 sets it to the element that the focus will move to, while Firefox and Chrome often set it to the `body` of the document.

See also
--------

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

Given a `WebKitPoint` specified in a particular DOM `Node`'s coordinate system, the `Window` method **`webkitConvertPointFromNodeToPage()`** returns a `Point` which specifies the same position in the page's coordinate system. This method is non-standard and *should not be used*.

**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
webkitConvertPointFromNodeToPage(node, nodePoint)
```

### Parameters

`node`

The `Node` in whose coordinate system the `Point` specified by `nodePoint` is described.

`nodePoint`

A `WebKitPoint` object describing a point in `node`'s coordinate system; this point will be converted to the page's coordinate system.

### Return value

A `WebKitPoint` object specifying a point in the page'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.webkitConvertPointFromPageToNode`
* Mozilla implementation bug: Firefox bug 850806
Window: status 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.

 The **`status`** property of the
 `Window` interface was originally intended to set the text in the status
 bar at the bottom of the browser window. However, the HTML standard now requires
 setting `window.status` to have no effect on the text displayed in the
 status bar.

Value
-----

A string.

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

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

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

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`getScreenDetails()`** method of the
 `Window` interface returns a `Promise` that fulfills with a `ScreenDetails` object instance representing the details of all the screens available to the user's device.

Syntax
------


```js
getScreenDetails()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with a `ScreenDetails` object instance.

### Exceptions

`NotAllowedError` `DOMException`

Thrown if a `window-management` Permissions-Policy is set that blocks use of the Window Management API, or if the user has explicitly denied the browser's permission request to use the API.

Examples
--------

When `getScreenDetails()` is invoked, the user will be asked for permission to manage windows on all their displays (the status of this permission can be checked using `Permissions.query()` to query `window-management`). Provided they grant permission, the resulting `ScreenDetails` object contains details of all the screens available to the user's system.

The below example opens a full-size window on each available display.


```js
const screenDetails = await window.getScreenDetails();

// Open a full-size window on each screen available to the device
for (const screen of screenDetails.screens) {
  window.open(
    "https://example.com",
    "\_blank",
    `left=${screen.availLeft},
 top=${screen.availTop},
 width=${screen.availWidth},
 height=${screen.availHeight}`,
  );
}
```


**Note:** See Multi-window learning environment for a full example (see the source code also).

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

| Specification |
| --- |
| Window Management # api-window-getScreenDetails-method |

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

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

See also
--------

* Window Management API
Window: name property
=====================

 The `Window.name` property
 gets/sets the name of the window's browsing context.

Value
-----

A string.

Description
-----------

 The name of the window is used primarily for setting targets for hyperlinks and forms.
 Browsing contexts do not need to have names.

 Modern browsers will reset `Window.name` to an empty string if a tab loads a
 page from a different domain, and restore the name if the original page is reloaded
 (e.g. by selecting the "back" button). This prevents an untrusted page from accessing
 any information that the previous page might have stored in the property (potentially
 the new page might also modify such data, which might then be read by the original page
 if it was reloaded).

`Window.name` has also been used in some frameworks for providing
 cross-domain messaging
 as a more secure alternative to JSONP. Modern web applications hosting sensitive data
 should, however, not rely on `window.name` for cross-domain messaging — that
 is not its intended purpose and there are safer/better ways of sharing information
 between windows.
 `Window.postMessage()`
 is the recommended mechanism.


**Note:** `window.name` converts all stored values to their
 string representations using the `toString` method.


Examples
--------


```html
<script>
 // Open a tab with a specific browsing context name
 const otherTab = window.open("url1", "\_blank");
 if (otherTab) otherTab.name = "other-tab";
</script>
<a href="url2" target="other-tab">This link will be opened in the other tab.</a>
```

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

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

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

 The **`showDirectoryPicker()`** method of the
 `Window` interface displays a directory picker which allows the user to
 select a directory.

Syntax
------


```js
showDirectoryPicker()
```

### Parameters

`options` Optional

An object containing options, which are as follows:

`id` Optional

 By specifying an ID, the browser can remember different directories for different
 IDs. If the same ID is used for another picker, the picker opens in the same
 directory.


`mode` Optional

 A string that defaults to `"read"` for read-only access or `"readwrite"` for read
 and write access to the directory.


`startIn` Optional

 A `FileSystemHandle` or a well known directory (`"desktop"`, `"documents"`,
 `"downloads"`, `"music"`, `"pictures"`, or `"videos"`) to open the dialog in.



### Return value

A `Promise` whose fulfillment handler receives a `FileSystemDirectoryHandle` object.

### Exceptions

`AbortError` `DOMException`

 Thrown if the user dismisses the prompt without making a selection,
 or if the user agent deems the selected directory to be too sensitive or dangerous,
 or if the `PermissionStatus.state` for the selected directory is not `"granted"` in the specified `mode`.


`SecurityError` `DOMException`

Thrown if the call was blocked by the same-origin policy or it was not called via a user interaction such as a button press.

Security
--------

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Examples
--------

 This asynchronous function shows a directory picker and returns a
 `FileSystemDirectoryHandle` once selected.


```js
async function getDir() {
  const dirHandle = await window.showDirectoryPicker();

  // run code for dirHandle
}
```

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

| Specification |
| --- |
| File System Access # api-showdirectorypicker |

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

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

See also
--------

* File System API
* The File System Access API: simplifying access to local files
Window: top property
====================

Returns a reference to the topmost window in the window hierarchy.

Value
-----

The reference to the topmost window.

Notes
-----

 Where the `window.parent` property returns the immediate parent of the
 current window, `window.top` returns the topmost window in the hierarchy of
 window objects.

 This property is especially useful when you are dealing with a window that is in a
 subframe of a parent or parents, and you want to get to the top-level frameset.

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

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

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

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

The **`hashchange`** event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the `#` symbol).

Syntax
------

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


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

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

A `HashChangeEvent`. Inherits from `Event`.

Event

HashChangeEventEvent properties
----------------

`HashChangeEvent.newURL` Read only 

A string representing the new URL the window is navigating to.

`HashChangeEvent.oldURL` Read only 

A string representing the previous URL from which the window was navigated.

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

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

* `HTMLBodyElement`
* `HTMLFrameSetElement`
* `SVGSVGElement`
Examples
--------

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


```js
window.addEventListener(
  "hashchange",
  () => {
    console.log("The hash has changed!");
  },
  false,
);
```


Or use the `onhashchange` event handler property:


```js
function locationHashChanged() {
  if (location.hash === "#cool-feature") {
    console.log("You're visiting a cool feature!");
  }
}

window.onhashchange = locationHashChanged;
```

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

| Specification |
| --- |
| HTML Standard # event-hashchange |
| HTML Standard # handler-window-onhashchange |

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

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

See also
--------

* `popstate` event
Window: languagechange event
============================

The **`languagechange`** event is fired at the global scope object when the user's preferred language changes.

Syntax
------

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


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

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

A generic `Event`.

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

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

* `HTMLBodyElement`
* `HTMLFrameSetElement`
* `SVGSVGElement`
Examples
--------

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


```js
window.addEventListener("languagechange", () => {
  console.log("languagechange event detected!");
});
```


Or use the `onlanguagechange` event handler property:


```js
window.onlanguagechange = (event) => {
  console.log("languagechange event detected!");
};
```

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

| Specification |
| --- |
| HTML Standard # event-languagechange |
| HTML Standard # handler-window-onlanguagechange |

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

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

See also
--------

* `navigator.language`
* `navigator.languages`
* `navigator`
Window: dump() 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.dump()`** method logs messages to the browser's standard output (`stdout`). If the browser was started from a terminal, output sent to `dump()` will appear in the terminal.

Output from `dump()` is *not* sent to the browser's developer tools console. To log to the developer tools console, use `console.log()`.

Syntax
------


```js
dump(message)
```

### Parameters

`message`

A string containing the message to log.

### Return value

None (`undefined`).

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.
Window: locationbar property
============================

Returns the `locationbar` 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-locationbar-dev |

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

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

See also
--------

* `window.menubar`
* `window.personalbar`
* `window.scrollbars`
* `window.statusbar`
* `window.toolbar`
Window: blur() method
=====================

Shifts focus away from the window.

Syntax
------


```js
blur()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
window.blur();
```

Notes
-----

 The window.blur() method is the programmatic equivalent of the user shifting focus away
 from the current window.

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

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

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

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

Opens the print dialog to print the current document.

If the document is still loading when this function is called, then the document will finish loading before opening the print dialog.

This method will block while the print dialog is open.

Syntax
------


```js
print()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| HTML Standard # printing |

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

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

See also
--------

* Printing
* `beforeprint` event
* `afterprint` event
Window: length property
=======================

 Returns the number of frames (either `<frame>` or
 `<iframe>` elements) in the window.

Value
-----

A number.

Examples
--------


```js
if (window.length) {
  // this is a document with subframes
}
```

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

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

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

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

 The read-only **`innerHeight`** property of the
 `Window` interface returns the interior height of the window in pixels,
 including the height of the horizontal scroll bar, if present.

 The value of `innerHeight` is taken from the height of the window's
 layout viewport. The width can be obtained using the
 `innerWidth` property.

Value
-----

 An integer value indicating the window's layout viewport height in pixels. The property
 is read only and has no default value.

 To change the width of the window, call one of its resize methods, such as
 `resizeTo()` or `resizeBy()`.

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

 To obtain the height of the window minus its horizontal scroll bar and any borders, use
 the root `<html>` element's `clientHeight` property instead.

 Both `innerHeight` and `innerWidth` are available on any window
 or any object that behaves like a window, such as a tab or frame.

Examples
--------

### Assuming a frameset


```js
console.log(window.innerHeight); // or

console.log(self.innerHeight);
// will log the height of the frame viewport within the frameset

console.log(parent.innerHeight);
// will log the height of the viewport of the closest frameset

console.log(top.innerHeight);
// will log the height of the viewport of the outermost frameset
```


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

 To get the outer height of a window, i.e. the height of the whole browser window, see
 `window.outerHeight`.

### Graphical example

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

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

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-innerheight |

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

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

See also
--------

* `window.innerWidth`
* `window.outerHeight`
* `window.outerWidth`