recursal/MDN huggingface dataset:
FormData: delete() method
=========================

The **`delete()`** method of the `FormData` interface deletes a key and its value(s) from a `FormData` object.

**Note:** This feature is available in Web Workers

Syntax
------


```js
delete(name)
```

### Parameters

`name`

The name of the key you want to delete.

### Return value

None (`undefined`).

Examples
--------

You can delete a key and its values using `delete()`:


```js
formData.delete("username");
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-delete |

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: append() method
=========================

The **`append()`** method of the `FormData` interface appends a new value onto an existing key inside a `FormData` object, or adds the key if it does not already exist.

The difference between `set()` and `append()` is that if the specified key already exists, `set()` will overwrite all existing values with the new one, whereas `append()` will append the new value onto the end of the existing set of values.

**Note:** This feature is available in Web Workers

Syntax
------


```js
append(name, value)
append(name, value, filename)
```

### Parameters

`name`

The name of the field whose data is contained in `value`.

`value`

The field's value. This can be a string or `Blob` (including subclasses such as `File`). If none of these are specified the value is converted to a string.

`filename` Optional

The filename reported to the server (a string), when a `Blob` or `File` is passed as the second parameter. The default filename for `Blob` objects is "blob". The default filename for `File` objects is the file's filename.


**Note:** If you specify a `Blob` as the data to append to the `FormData` object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.

### Return value

None (`undefined`).

Examples
--------


```js
formData.append("username", "Chris");
```


When the value is a `Blob` (or a `File`), you can specify its name with the `filename` parameter:


```js
formData.append("userpic", myFileInput.files[0], "chris.jpg");
```


As with regular form data, you can append multiple values with the same name:


```js
formData.append("userpic", myFileInput.files[0], "chris1.jpg");
formData.append("userpic", myFileInput.files[1], "chris2.jpg");
```


If the value is not a string or a `Blob`, `append()` will convert it to a string automatically:


```js
formData.append("name", true);
formData.append("name", 72);
formData.getAll("name"); // ["true", "72"]
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-append |

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: getAll() method
=========================

The **`getAll()`** method of the `FormData` interface returns all the values associated with a given key from within a `FormData` object.

**Note:** This feature is available in Web Workers

Syntax
------


```js
getAll(name)
```

### Parameters

`name`

A string representing the name of the key you want to retrieve.

### Return value

An array of values whose key matches the specified `name`. Otherwise, an empty list.

Examples
--------

If we add two `username` values to a `FormData` using `append()`:


```js
formData.append("username", "Chris");
formData.append("username", "Bob");
```


The following `getAll()` method will return both `username` values in an array:


```js
formData.getAll("username"); // Returns ["Chris", "Bob"]
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-getall |

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: values() method
=========================

The **`FormData.values()`** method returns an iterator which iterates through all values contained in the `FormData`. The values are strings or `Blob` objects.

**Note:** This feature is available in Web Workers

Syntax
------


```js
values()
```

### Parameters

None.

### Return value

An `iterator` of `FormData`'s values.

Examples
--------


```js
const formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the values
for (const value of formData.values()) {
  console.log(value);
}
```


The result is:
```

value1
value2
```

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

#### No specification found

No specification data found for `api.FormData.values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: FormData() constructor
================================

The **`FormData()`** constructor creates a new `FormData` object.

**Note:** This feature is available in Web Workers

Syntax
------


```js
new FormData()
new FormData(form)
new FormData(form, submitter)
```

### Parameters

`form` Optional

An HTML `<form>` element — when specified, the `FormData` object will be populated with the `form`'s current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.

`submitter` Optional

A submit button that is a member of the `form`. If the `submitter` has a `name` attribute or is an `<input type="image">`, its data will be included in the `FormData` object (e.g. `btnName=btnValue`).

### Exceptions

`TypeError`

Thrown if the specified `submitter` is not a submit button.

`NotFoundError` `DOMException`

 Thrown if the specified `submitter` isn't a member of the `form`. The `submitter` must be either a
 descendant of the form element or must have a `form`
 attribute referring to the form.


Examples
--------

### Creating an empty FormData

The following line creates an empty `FormData` object:


```js
const formData = new FormData();
```


You could add a key/value pair to this using `append()`:


```js
formData.append("username", "Chris");
```

### Prepopulating from a HTML form element

You can specify the optional `form` and `submitter` arguments when creating the `FormData` object, to prepopulate it with values from the specified form.

**Note:** Only successful form controls are included in a FormData object, i.e. those with a name and not in a disabled state.

#### HTML


```html
<form id="form">
  <input type="text" name="text1" value="foo" />
  <input type="text" name="text2" value="bar" />
  <input type="text" name="text2" value="baz" />
  <input type="checkbox" name="check" checked disabled />
  <button name="intent" value="save">Save</button>
  <button name="intent" value="saveAsCopy">Save As Copy</button>
</form>

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


```
form {
  display: none;
}

output {
  display: block;
  white-space: pre-wrap;
}
```


#### JavaScript


```js
const form = document.getElementById("form");
const submitter = document.querySelector("button[value=save]");
const formData = new FormData(form, submitter);

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

for (const [key, value] of formData) {
  output.textContent += `${key}: ${value}\n`;
}
```


#### Result

For brevity, the `<form>` element is hidden from view.

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata |

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: set() method
======================

The **`set()`** method of the `FormData` interface sets a new value for an existing key inside a `FormData` object, or adds the key/value if it does not already exist.

The difference between `set()` and `append()` is that if the specified key does already exist, `set()` will overwrite all existing values with the new one, whereas `append()` will append the new value onto the end of the existing set of values.

**Note:** This feature is available in Web Workers

Syntax
------


```js
set(name, value)
set(name, value, filename)
```

### Parameters

`name`

The name of the field whose data is contained in `value`.

`value`

The field's value. This can be a string or `Blob` (including subclasses such as `File`). If none of these are specified the value is converted to a string.

`filename` Optional

The filename reported to the server (a string), when a `Blob` or `File` is passed as the second parameter. The default filename for `Blob` objects is "blob". The default filename for `File` objects is the file's filename.


**Note:** If you specify a `Blob` as the data to append to the `FormData` object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.

### Return value

None (`undefined`).

Examples
--------


```js
formData.set("username", "Chris");
```


When the value is a `Blob` (or a `File`), you can specify its name with the `filename` parameter:


```js
formData.set("userpic", myFileInput.files[0], "chris.jpg");
```


If the value is not a string or a `Blob`, `set()` will convert it to a string automatically:


```js
formData.set("name", 72);
formData.get("name"); // "72"
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-set |

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

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

See also
--------

* Using FormData objects
* `<form>`
FormData: entries() method
==========================

The **`FormData.entries()`** method returns an iterator which iterates through all key/value pairs contained in the `FormData`. The key of each pair is a string object, and the value is either a string or a `Blob`.

**Note:** This feature is available in Web Workers

Syntax
------


```js
entries()
```

### Parameters

None.

### Return value

An iterator of `FormData`'s key/value pairs.

Examples
--------


```js
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the key/value pairs
for (const pair of formData.entries()) {
  console.log(pair[0], pair[1]);
}
```


The result is:
```

key1 value1
key2 value2
```

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

#### No specification found

No specification data found for `api.FormData.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* Using FormData objects
* `<form>`
HTMLIFrameElement: referrerPolicy property
==========================================

 The
 **`HTMLIFrameElement.referrerPolicy`**
 property reflects the HTML `referrerpolicy` attribute of the
 `<iframe>` element defining which referrer is sent when fetching the
 resource.

Value
-----

`no-referrer`

 The `Referer` header will be omitted entirely. No referrer
 information is sent along with requests.


`no-referrer-when-downgrade`

 The URL is sent
 as a referrer when the protocol security level stays the same (HTTP→HTTP,
 HTTPS→HTTPS), but isn't sent to a less secure destination (HTTPS→HTTP).


`origin`

 Only send the origin of the document as the referrer in all cases.
 The document `https://example.com/page.html` will send the referrer
 `https://example.com/`.


`origin-when-cross-origin`

 Send a full URL when performing a same-origin request, but only send the origin of
 the document for other cases.


`same-origin`

 A referrer will be sent for same-site origins, but
 cross-origin requests will contain no referrer information.


`strict-origin`

 Only send the origin of the document as the referrer when the protocol security
 level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination
 (HTTPS→HTTP).


`strict-origin-when-cross-origin` (default)

 This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the
 protocol security level stays the same (HTTPS→HTTPS), and send no header to a less
 secure destination (HTTPS→HTTP).


`unsafe-url`

Send a full URL when performing a same-origin or cross-origin request.

**Note:** This policy will leak origins and paths from TLS-protected resources
 to insecure origins. Carefully consider the impact of this setting.


Examples
--------


```js
const iframe = document.createElement("iframe");
iframe.src = "/";
iframe.referrerPolicy = "unsafe-url";
const body = document.querySelector("body");
body.appendChild(iframe); // Fetch the image using the complete URL as the referrer
```

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

| Specification |
| --- |
| HTML Standard # dom-iframe-referrerpolicy |

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

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

See also
--------

* `HTMLAnchorElement.referrerPolicy`,
 `HTMLAreaElement.referrerPolicy`, and
 `HTMLAreaElement.referrerPolicy`.
HTMLIFrameElement: contentDocument property
===========================================

If the iframe and the iframe's parent document are Same Origin, returns a `Document` (that is, the active document in the inline frame's nested browsing context), else returns `null`.

Example of contentDocument
--------------------------


```js
const iframeDocument = document.querySelector("iframe").contentDocument;

iframeDocument.body.style.backgroundColor = "blue";
// This would turn the iframe blue.
```

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

| Specification |
| --- |
| HTML Standard # dom-iframe-contentdocument |

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

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

 The **`HTMLIFrameElement.src`**
 A string that reflects the `src` HTML attribute, containing the address of the content to be embedded.

Note that programmatically removing an `<iframe>`'s src attribute (e.g. via `Element.removeAttribute()`) causes `about:blank` to be loaded in the frame.

Syntax
------


```js
src = iframeElt.src
iframeElt.src= src
```

Example
-------


```js
const iframe = document.createElement("iframe");
iframe.src = "/";
const body = document.querySelector("body");
body.appendChild(iframe); // Fetch the image using the complete URL as the referrer
```

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

| Specification |
| --- |
| HTML Standard # dom-iframe-src |

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

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

See also
--------

* `HTMLAnchorElement.src`
* `HTMLAreaElement.src`
* `HTMLAreaElement.src`.
HTMLIFrameElement: allowPaymentRequest 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.

**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 **`allowPaymentRequest`** property of the
 `HTMLIFrameElement` interface returns a boolean value indicating
 whether the Payment Request API may be invoked on a cross-origin iframe.

Value
-----

A boolean value.

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

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

See also
--------

* Payment Request API
HTMLIFrameElement: contentWindow property
=========================================

The **`contentWindow`** property returns the Window object of an HTMLIFrameElement.

This attribute is read-only.

Value
-----

A Window object.

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

Access to the `Window` returned by `contentWindow` is subject to the rules defined by the same-origin policy, meaning that if the iframe is same-origin with the parent, then the parent can access the iframe's document and its internal DOM, and if they are cross-origin, it gets very limited access to the window's attributes. See "Cross-origin script API access" for details.

Pages can also use this property to find out which iframe sent a message using `Window.postMessage()`, by comparing it with the message event's `source` property.

Examples
--------

### Accessing an iframe's document

This example modifies the `style` attribute of the document body.

Note that this only works if the iframe's window is same-origin with its parent: otherwise attempting to access `contentWindow.document` will throw an exception.


```js
const iframe = document.querySelector("iframe").contentWindow;

iframe.document.querySelector("body").style.backgroundColor = "blue";
// this would turn the 1st iframe in document blue.
```

### Mapping message sources to iframes

This example could run in a page that hosts several iframes, any of which can send it messages using `Window.postMessage()`. When the page receives a message, it wants to know which iframe contains the window that sent the message.

To do this, when it receives a message, the page first checks that the message was from the expected origin, and then finds the iframe that was the source of the message by comparing the message event's `source` property with the iframe's `contentWindow` property.


```js
const expectedOrigin = "https://example.org";

const iframes = Array.from(document.querySelectorAll("iframe"));

window.addEventListener("message", (e) => {
  if (e.origin !== expectedOrigin) return;

  const sourceIframe = iframes.find(
    (iframe) => iframe.contentWindow === e.source,
  );

  console.log(sourceIframe);
});
```

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

| Specification |
| --- |
| HTML Standard # dom-iframe-contentwindow |

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

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

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

 The **`csp`** property of the `HTMLIFrameElement`
 interface specifies the Content Security Policy that an
 embedded document must agree to enforce upon itself.

Value
-----

A content security policy.

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

| Specification |
| --- |
| Content Security Policy: Embedded Enforcement # ref-for-dom-htmliframeelement-csp |

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

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

The **`srcdoc`** property of the `HTMLIFrameElement` specifies the content of the page.

Examples
--------


```js
const iframe = document.createElement("iframe");
iframe.srcdoc = `<!DOCTYPE html><p>Hello World!</p>`;
document.body.appendChild(iframe);
```

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

| Specification |
| --- |
| HTML Standard # dom-iframe-srcdoc |

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

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

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

 The **`featurePolicy`** read-only
 property of the `HTMLIFrameElement` interface returns the
 `FeaturePolicy` interface which provides a simple API for introspecting
 the Permissions Policies applied to a specific frame.

Value
-----

 A `FeaturePolicy` object
 that can be used to inspect the Permissions Policy settings applied to the frame.

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

#### No specification found

No specification data found for `api.HTMLIFrameElement.featurePolicy`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

The **`credentialless`** property of the `HTMLIFrameElement` interface indicates whether the `<iframe>` is credentialless, meaning that documents inside will be loaded using new, ephemeral contexts.

Those contexts do not have access to their network, cookies and storage data associated with their origin. Instead, they use new ones, local to the top-level document lifetime. It means any data stored won't be accessible anymore after the user navigates away from the page or reloads it.

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. The default value is `false`; set it to `true` to make the `<iframe>` credentialless.

Examples
--------

### Get

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


Return the `credentialless` property value:


```js
const iframeElem = document.querySelector("iframe");
console.log(iframeElem.credentialless); // will return true in supporting browsers
```

### Set

Alternatively, specify the minimum of details in the HTML:


```html
<iframe width="960" height="600"> </iframe>
```


And set `credentialless` to `true` then load the `<iframe>` contents via script:


```js
const iframeElem = document.querySelector("iframe");

iframeElem.credentialless = true;
iframeElem.title = "Spectre vulnerability Wikipedia page";
iframeElem.src =
  "https://en.wikipedia.org/wiki/Spectre\_(security\_vulnerability)";
```

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

| Specification |
| --- |
| Iframe credentialless # dom-htmliframeelement-credentialless |

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

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

See also
--------

* IFrame credentialless
* `<iframe>`