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.
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.
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>:
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>.