HTMLFencedFrameElement: config property

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.

Theconfig property of theHTMLFencedFrameElement contains aFencedFrameConfig 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.

Value

The value ofconfig is initiallynull.

When its value is set to aFencedFrameConfig object instance, theFencedFrameConfig's internal properties (for examplemappedURL) determine what is loaded inside the associated<fencedframe>. In addition:

The navigation type will be"replace" (seeNavigateEvent.navigationType), meaning that the current history entry is replaced with the new entry, rather adding a new history entry for it.
The navigation'sReferrer-Policy is set to"no-referrer".

Examples

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