HTMLFencedFrameElement

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

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({
  // 拍卖配置
  resolveToConfig: true,
});

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

备注: 在调用 runAdAuction() 时,必须传入 resolveToConfig: true 以获得 FencedFrameConfig 对象。如果没有设置,则所得的 Promise 将兑现为一个 URN,该 URN 只能在 <iframe> 中使用。

规范

Specification
Fenced Frame
# htmlfencedframeelement

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLFencedFrameElement
Experimental
allow
Experimental
config
Experimental
height
Experimental
sandbox
Experimental
width
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

参见