HTMLFencedFrameElement

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

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

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

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

HTMLFencedFrameElement.width

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

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
HTMLFencedFrameElement
Experimental
allow
Experimental
config
Experimental
height
Experimental
width
Experimental

See also