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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
HTMLFencedFrameElement 117 117 No 103 No 117 No 78 No 24.0 117
allow 117 117 No 103 No 117 No 78 No 24.0 117
config 117 117 No 103 No 117 No 78 No 24.0 117
height 117 117 No 103 No 117 No 78 No 24.0 117
width 117 117 No 103 No 117 No 78 No 24.0 117

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFencedFrameElement