HTMLFencedFrameElement

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

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

Instance properties

Inherits properties from its parent,HTMLElement.

HTMLFencedFrameElement.allowExperimental: 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.configExperimental: a FencedFrameConfig object, which represents the navigation of a<fencedframe>, i.e., what content will be displayed in it. AFencedFrameConfig is returned from a source such as theProtected Audience API.
HTMLFencedFrameElement.heightExperimental: Gets and sets the value of the corresponding<fencedframe>height attribute, which specifies the height of the element.
HTMLFencedFrameElement.widthExperimental: Gets and sets the value of the corresponding<fencedframe>width attribute, which specifies the width of the element.

To set what content will be shown in a<fencedframe>, a utilizing API (such asProtected Audience orShared Storage) generates aFencedFrameConfig object, which is then set as the value of the<fencedframe>'sconfig property.

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

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 therunAdAuction() call to obtain aFencedFrameConfig object. If it is not set, the resultingPromise will resolve to a URN that can only be used in an<iframe>.