recursal/MDN huggingface dataset:
DocumentPictureInPicture: requestWindow() method
================================================

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

 The **`requestWindow()`** method of the
 `DocumentPictureInPicture` interface opens the Picture-in-Picture window for the current main browsing context. It returns a `Promise` that fulfills with a `Window` instance representing the browsing context inside the Picture-in-Picture window.

The `requestWindow()` method requires transient activation, i.e. it must be invoked in response to a user action such as a mouse click or button press.

Syntax
------


```js
requestWindow()
requestWindow(options)
```

### Parameters

`options` Optional

An options object containing the following properties:

`height`

A non-negative number representing the height to set for the Picture-in-Picture window's viewport, in pixels. If `options` is not specified, the default value 0 is used.

`width`

A non-negative number representing the width to set for the Picture-in-Picture window's viewport, in pixels. If `options` is not specified, the default value 0 is used.


**Note:** If one of the options is specified, the other one must be too, otherwise an error is thrown. If both values are not specified, specified as 0, or set too large, the browser will clamp or ignore the values as appropriate to provide a reasonable user experience. The clamped size will vary depending on implementation, display size, and other factors.

### Return value

A `Promise` that fulfills with a `Window` object instance representing the browsing context inside the Picture-in-Picture window.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the API has been explicitly disabled (for example via browser settings).

`NotAllowedError` `DOMException`

Thrown if:

* `requestWindow()` is not called from a top-level `window` object.
* `requestWindow()` is called from the `window` object of the Picture-in-Picture window (i.e. `DocumentPictureInPicture.window`).
* `requestWindow()` is called without transient activation.

`RangeError` `DOMException`

Thrown if only one of `height` and `width` are set, or if `height` and `width` are set with negative values.

Examples
--------


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

// ...

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

// ...
```

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

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

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
DocumentPictureInPicture: window property
=========================================

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

 The **`window`** read-only property of the
 `DocumentPictureInPicture` interface returns a `Window` instance representing the browsing context inside the Picture-in-Picture window.

Value
-----

A `Window` object instance if the Picture-in-Picture window has already been opened using `DocumentPictureInPicture.requestWindow()`, or `null` otherwise.

Examples
--------


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

// ...

await window.documentPictureInPicture.requestWindow({
  width: videoPlayer.clientWidth,
  height: videoPlayer.clientHeight,
});

// ...

const pipWindow = window.documentPictureInPicture.window;
if (pipWindow) {
  // Mute video playing in the Picture-in-Picture window.
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
}
```

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

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

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

 The **`addModule()`** method of the
 `Worklet` interface loads the module in the given JavaScript file and
 adds it to the current `Worklet`.

Syntax
------


```js
addModule(moduleURL)
addModule(moduleURL, options)
```

### Parameters

`moduleURL`

 A `String` containing the URL of a JavaScript file with the module to
 add.


`options` Optional

An object with any of the following options:

`credentials`

 A `Request.credentials` value that
 indicates whether to send credentials (e.g. cookies and HTTP authentication)
 when loading the module. Can be one of `"omit"`,
 `"same-origin"`, or `"include"`. Defaults to
 `"same-origin"`. See also `Request.credentials`.



### Return value

 A `Promise` that resolves once the module from the given URL has been
 added. The promise doesn't return any value.

### Exceptions

 If `addModule()` fails, it rejects the promise, delivering one of the
 following errors to the rejection handler.

`AbortError` `DOMException`

The specified script is invalid or could not be loaded.

`SyntaxError` `DOMException`

The specified `moduleURL` is invalid.

Examples
--------

### AudioWorklet example


```js
const audioCtx = new AudioContext();
const audioWorklet = audioCtx.audioWorklet;
audioWorklet.addModule("modules/bypassFilter.js", {
  credentials: "omit",
});
```

### PaintWorklet example


```js
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
```


 Once the script has been added to the paint worklet, the CSS `paint()` function
 can be used to include the image created by the worklet:


```css
@supports (background-image: paint(id)) {
  h1 {
    background-image: paint(hollowHighlights, filled, 3px);
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-worklet-addmodule-dev |

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

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

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`inputType`** read-only property of the
 `InputEvent` interface returns the type of change made to editable content.
 Possible changes include for example inserting, deleting, and formatting text.

Value
-----

 A string containing the type of input that was made. There are many
 possible values, such as `insertText`, `deleteContentBackward`,
 `insertFromPaste`, and `formatBold`. For a complete list of the
 available input types, see the Attributes section of the Input Events Level 2 spec.

Examples
--------

 This example logs the `inputType` for input events on an editable
 `<div>`.

### HTML


```html
<p id="log">Input type:</p>
<div
 contenteditable="true"
 style="margin: 20px;padding: 20px;border:2px dashed red;">
  <p>
    Some sample text. Try inserting line breaks, or deleting text in different
    ways, or pasting different content in.
  </p>
  <hr />
  <ul>
    <li>A sample</li>
    <li>bulleted</li>
    <li>list.</li>
  </ul>
  <p>Another paragraph.</p>
</div>
```

### JavaScript


```js
const log = document.getElementById("log");
const editable = document.querySelector("div[contenteditable]");
editable.addEventListener("input", logInputType);

function logInputType(event) {
  log.textContent = `Input type: ${event.inputType}`;
}
```

### Result

Try editing the text inside the `<div>` and see what happens.

**Note:** See also Masayuki Nakano's InputEvent test suite for a more detailed example.

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

| Specification |
| --- |
| UI Events # dom-inputevent-inputtype |

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

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

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`InputEvent.isComposing`** read-only property returns a
 boolean value indicating if the event is fired after
 `compositionstart` and before `compositionend`.

Value
-----

A boolean.

Examples
--------


```js
const inputEvent = new InputEvent("syntheticInput", false);
console.log(inputEvent.isComposing); // return false
```

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

| Specification |
| --- |
| UI Events # dom-inputevent-iscomposing |

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

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

See also
--------

* `compositionstart` and `compositionend`
* `InputEvent`
InputEvent: data property
=========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`data`** read-only property of the
 `InputEvent` interface returns a string with inserted
 characters. This may be an empty string if the change doesn't insert text, such as when
 characters are deleted.

Value
-----

A string.

Examples
--------

 In the following example, an event listener receives the input event. Any textual change
 to the `<input>` element is retrieved by `InputEvent.data` and
 inserted into a paragraph using the
 `Node.textContent`
 property.


```html
<p>Some text to copy and paste.</p>

<input type="text" />

<p class="result"></p>
```



```js
const editable = document.querySelector("input");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = `Inputted text: ${e.data}`;
});
```

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

| Specification |
| --- |
| Input Events Level 2 # dfn-data |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
InputEvent: InputEvent() constructor
====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`InputEvent()`** constructor creates a new `InputEvent` object.

Syntax
------


```js
new InputEvent(type)
new InputEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `beforeinput`, or `input`.


`options` Optional

An object that, *in addition of the properties defined in `UIEvent()`*, can have the following properties:

`inputType` Optional

 A string specifying the type of change for editable content
 such as, for example, inserting, deleting, or formatting text.


`data` Optional

 A string containing characters to insert.
 This may be an empty string if the change doesn't insert text
 (such as when deleting characters, for example).


`isComposing` Optional

 A boolean indicating that the event is part of a composition session,
 meaning it is after a `compositionstart` event but before a `compositionend` event. The default is `false`.



Return value
------------

A new `InputEvent` object.

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

| Specification |
| --- |
| UI Events # dom-inputevent-inputevent |

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

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

See also
--------

* `InputEvent`, the interface of the objects it constructs.
InputEvent: dataTransfer property
=================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The **`dataTransfer`** read-only property of the
 `InputEvent` interface returns a `DataTransfer` object
 containing information about richtext or plaintext data being added to or removed from
 editable content.

Value
-----

A `DataTransfer` object.

Examples
--------

 In the following simple example we've set up an event listener on the input event so that when any
 content is pasted into the contenteditable `<p>` element, its HTML source
 is retrieved via the
 `InputEvent.dataTransfer.getData()`
 method and reported in the paragraph below the input.

Try copying and pasting some of the content provided to see the effects.


```html
<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
<p>
  <span style="font-style: italic; color: red">Exciting: italic red text!</span>
</p>
<p>Boring normal text ;-(</p>

<hr />

<p contenteditable="true">
  Go on, try pasting some content into this editable paragraph and see what
  happens!
</p>

<p class="result"></p>
```



```js
const editable = document.querySelector("p[contenteditable]");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = e.dataTransfer.getData("text/html");
});
```

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

| Specification |
| --- |
| Input Events Level 2 # dom-inputevent-datatransfer |

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

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

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`getTargetRanges()`** method of the `InputEvent` interface returns an array of static ranges that will be affected by a change to the DOM if the input event is not canceled.

This allows web apps to override text edit behavior before the browser modifies the DOM tree, and provides more control over input events to improve performance.

Depending on the value of `inputType` and the current editing host, the expected return value of this method varies:

| inputType | Editing host | Response of `getTargetRanges()` |
| --- | --- | --- |
| `"historyUndo"` or `"historyRedo"` | Any | empty Array |
| All remaining | `contenteditable` | 
 an Array of
 `StaticRange`
 objects associated with event
  |
| All remaining | `input`
 or `textarea` | an empty Array |

Syntax
------


```js
getTargetRanges()
```

### Parameters

None.

### Return value

An array of `StaticRange` objects.

Examples
--------

### Feature Detection

 The following function returns true if `beforeinput`, and thus
 `getTargetRanges`, is supported.


```js
function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}
```

### Basic usage

 The following example selects a `contenteditable` element and utilizes the
 `beforeinput`
 event to log the result of `getTargetRanges()`.


```js
const editableElem = document.querySelector('[contenteditable="true"]');

editableElem.addEventListener("beforeinput", (e) => {
  const targetRanges = e.getTargetRanges();
  console.log(targetRanges);
});
```

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

| Specification |
| --- |
| Input Events Level 2 # dom-inputevent-gettargetranges |

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

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

 The `XMLHttpRequest` method **`setRequestHeader()`** sets the value of an HTTP request header.
 When using `setRequestHeader()`, you must call it after calling `open()`, but before calling `send()`.
 If this method is called several times with the same header, the values are merged into one single request header.

Each time you call `setRequestHeader()` after the first time you call it, the specified text is appended to the end of the existing header's content.

If no `Accept` header has been set using this, an `Accept` header with the type `"*/*"` is sent with the request when `send()` is called.

For security reasons, there are several forbidden header names whose values are controlled by the user agent. Any attempt to set a value for one of those headers from frontend JavaScript code will be ignored without warning or error.

In addition, the `Authorization` HTTP header may be added to a request, but will be removed if the request is redirected cross-origin.

**Note:** For your custom fields, you may encounter a "**not allowed by Access-Control-Allow-Headers in preflight response**" exception when you send requests across domains.
 In this situation, you need to set up the `Access-Control-Allow-Headers` in your response header at server side.


Syntax
------


```js
setRequestHeader(header, value)
```

### Parameters

`header`

The name of the header whose value is to be set.

`value`

The value to set as the body of the header.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| XMLHttpRequest Standard # the-setrequestheader()-method |

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

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

See also
--------

* Using XMLHttpRequest
* HTML in XMLHttpRequest
XMLHttpRequest: timeout event
=============================

The **`timeout`** event is fired when progression is terminated due to preset time expiring.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------


```js
const client = new XMLHttpRequest();
client.open("GET", "http://www.example.org/example.txt");
client.ontimeout = () => {
  console.error("Timeout!!");
};

client.send();
```


You could also set up the event handler using the `addEventListener()` method:


```js
client.addEventListener("timeout", () => {
  console.error("Timeout!!");
});
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-timeout |
| XMLHttpRequest Standard # handler-xhr-ontimeout |

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

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

See also
--------

* `XMLHttpRequest`
XMLHttpRequest: getAllResponseHeaders() method
==============================================

 The `XMLHttpRequest` method
 **`getAllResponseHeaders()`** returns all the response
 headers, separated by CRLF, as a string, or returns `null`
 if no response has been received.

 If a network error happened, an empty string
 is returned.


**Note:** For multipart requests, this returns the headers from the
 *current* part of the request, not from the original channel.


Syntax
------


```js
getAllResponseHeaders()
```

### Parameters

None.

### Return value

 A string representing all of the response's headers (except those
 whose field name is `Set-Cookie`) separated by CRLF,
 or `null` if no response has been received. If a network error
 happened, an empty string is returned.

An example of what a raw header string looks like:


```http
date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
content-encoding: gzip\r\n
x-content-type-options: nosniff\r\n
server: meinheld/0.6.1\r\n
x-frame-options: DENY\r\n
content-type: text/html; charset=utf-8\r\n
connection: keep-alive\r\n
strict-transport-security: max-age=63072000\r\n
vary: Cookie, Accept-Encoding\r\n
content-length: 6502\r\n
x-xss-protection: 1; mode=block\r\n
```


 Each line is terminated by both carriage return and line feed characters
 (`\r\n`). These are essentially delimiters separating each of the headers.


**Note:** In modern browsers, the header names are returned in all lower
 case, as per the latest spec.


Examples
--------

 This example examines the headers in the request's `readystatechange` event. The code shows how to obtain
 the raw header string, as well as how to convert it into an array of individual headers
 and then how to take that array and create a mapping of header names to their values.


```js
const request = new XMLHttpRequest();
request.open("GET", "foo.txt", true);
request.send();

request.onreadystatechange = () => {
  if (request.readyState === this.HEADERS\_RECEIVED) {
    // Get the raw header string
    const headers = request.getAllResponseHeaders();

    // Convert the header string into an array
    // of individual headers
    const arr = headers.trim().split(/[\r\n]+/);

    // Create a map of header names to values
    const headerMap = {};
    arr.forEach((line) => {
      const parts = line.split(": ");
      const header = parts.shift();
      const value = parts.join(": ");
      headerMap[header] = value;
    });
  }
};
```


Once this is done, you can, for example:


```js
const contentType = headerMap["content-type"];
```


 This obtains the value of the `Content-Type` header into the variable
 `contentType`.

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

| Specification |
| --- |
| XMLHttpRequest Standard # the-getallresponseheaders()-method |

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

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

See also
--------

* Using XMLHttpRequest
* Setting request headers: `setRequestHeader()`