HTMLFencedFrameElement

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

The HTMLFencedFrameElement interface represents a <fencedframe> element in JavaScript and provides configuration properties.

EventTarget Node Element HTMLElement HTMLFencedFrameElement

Instance properties

Inherits properties from its parent, HTMLElement.

HTMLFencedFrameElement.allow Experimental

Gets and sets the value of the corresponding <fencedframe> allow attribute, which represents a Permissions Policy applied to the content when it is first embedded.

HTMLFencedFrameElement.config Experimental

a FencedFrameConfig object, which represents the navigation of a <fencedframe>, i.e. what content will be displayed in it. A FencedFrameConfig is returned from a source such as the Protected Audience API.

HTMLFencedFrameElement.height Experimental

Gets and sets the value of the corresponding <fencedframe> height attribute, which specifies the height of the element.

HTMLFencedFrameElement.width Experimental

Gets and sets the value of the corresponding <fencedframe> width attribute, which specifies the width of the element.

Examples

To set what content will be shown in a <fencedframe>, a utilizing API (such as Protected Audience or Shared Storage) generates a FencedFrameConfig object, which is then set as the value of the <fencedframe>'s config property.

The following example gets a FencedFrameConfig from a Protected Audience API's ad auction, which is then used to display the winning ad in a <fencedframe>:

js
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true,
});

const frame = document.createElement("fencedframe");
frame.config = frameConfig;

Note: resolveToConfig: true must be passed in to the runAdAuction() call to obtain a FencedFrameConfig object. If it is not set, the resulting Promise will resolve to a URN that can only be used in an <iframe>.

Specifications

Specification
Fenced Frame
# htmlfencedframeelement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLFencedFrameElement
Experimental
allow
Experimental
config
Experimental
height
Experimental
sandbox
Experimental
width
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also