HTMLFencedFrameElement

Deprecated

To be removed

This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates. Following the announcement that Chrome will maintain its current approach to third-party cookies, Chrome decided to withdraw certain Privacy Sandbox features including the <fencedframe> element and related APIs.

Learn more
See full compatibility

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.

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

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