HTMLFencedFrameElement

实验性: 这是一种 实验性技术
在生产环境中使用此功能之前,请仔细检查 浏览器兼容性表格

HTMLFencedFrameElement 接口在 JavaScript 中表示 <fencedframe> 元素,并提供配置属性。

EventTarget Node Element HTMLElement HTMLFencedFrameElement

实例属性

继承自其父级 HTMLElement 的属性。

HTMLFencedFrameElement.allow 实验性

获取和设置相应 <fencedframe> allow 属性的值,该属性表示在首次嵌入内容时应用于该内容的 权限策略

HTMLFencedFrameElement.config 实验性

一个 FencedFrameConfig 对象,它表示 <fencedframe> 的导航,即将在其中显示什么内容。FencedFrameConfig 来自于诸如 受保护受众 API 之类的来源。

HTMLFencedFrameElement.height 实验性

获取和设置相应 <fencedframe> height 属性的值,该属性指定元素的高度。

HTMLFencedFrameElement.width 实验性

获取和设置相应 <fencedframe> width 属性的值,该属性指定元素的宽度。

示例

要设置在 <fencedframe> 中显示的内容,利用 API(例如 受保护受众共享存储)会生成一个 FencedFrameConfig 对象,然后将其设置为 <fencedframe>config 属性的值。

以下示例从受保护受众 API 的广告拍卖中获取 FencedFrameConfig,然后将其用于在 <fencedframe> 中显示中标广告

js
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true,
});

const frame = document.createElement("fencedframe");
frame.config = frameConfig;

注意: 必须将 resolveToConfig: true 传递给 runAdAuction() 调用以获取 FencedFrameConfig 对象。如果未设置,则生成的 Promise 将解析为一个 URN,该 URN 只能在 <iframe> 中使用。

规范

规范
Fenced Frame
# htmlfencedframeelement

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅