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.
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. AFencedFrameConfig
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>
:
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true,
});
const frame = document.createElement("fencedframe");
frame.config = frameConfig;
Specifications
Specification |
---|
Fenced Frame # htmlfencedframeelement |
Browser compatibility
BCD tables only load in the browser
See also
- Fenced frames on developers.google.com
- The Privacy Sandbox on developers.google.com