diff --git a/files/zh-cn/web/api/htmlfencedframeelement/allow/index.md b/files/zh-cn/web/api/htmlfencedframeelement/allow/index.md new file mode 100644 index 00000000000000..3b7d208831e18d --- /dev/null +++ b/files/zh-cn/web/api/htmlfencedframeelement/allow/index.md @@ -0,0 +1,36 @@ +--- +title: HTMLFencedFrameElement:allow 属性 +slug: Web/API/HTMLFencedFrameElement/allow +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef +--- + +{{SeeCompatTable}}{{APIRef("Fenced Frame API")}} + +{{domxref("HTMLFencedFrameElement")}} 的 **`allow`** 属性用于获取并设置对应 {{htmlelement("fencedframe")}} 元素的 `allow` 属性的值,该属性表示内容首次嵌入时应用的[权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)。 + +并非所有权限策略都允许在围栏框架中使用。允许的权限列在[围栏框架可用的权限策略](/zh-CN/docs/Web/HTML/Element/fencedframe#permissions_policies_available_to_fenced_frames)中——这些权限是加载来自指定 API 的围栏框架内容所必需的。如果不设置 `allow` 属性,那么默认情况下将允许这些权限。如果想要缩小权限集,需要确保正在使用的 API 所需的所有权限都已在 `allow` 属性中设置。 + +## 值 + +表示[权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)的字符串。 + +## 示例 + +```js +const frame = document.createElement("fencedframe"); +console.log(frame.allow); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.cn 上的[围栏框架](https://developers.google.cn/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox) diff --git a/files/zh-cn/web/api/htmlfencedframeelement/config/index.md b/files/zh-cn/web/api/htmlfencedframeelement/config/index.md new file mode 100644 index 00000000000000..0127d3fc26c466 --- /dev/null +++ b/files/zh-cn/web/api/htmlfencedframeelement/config/index.md @@ -0,0 +1,51 @@ +--- +title: HTMLFencedFrameElement:config 属性 +slug: Web/API/HTMLFencedFrameElement/config +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef +--- + +{{SeeCompatTable}}{{APIRef("Fenced Frame API")}} + +{{domxref("HTMLFencedFrameElement")}} 的 **`config`** 属性包含一个 {{domxref("FencedFrameConfig")}} 对象,表示 {{htmlelement("fencedframe")}} 的导航,即其中将显示什么内容。`FencedFrameConfig` 是从诸如[受保护的受众 API](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience) 等来源返回的。 + +## 值 + +`config` 的初始值为 `null`。 + +当值设置为 {{domxref("FencedFrameConfig")}} 对象实例,`FencedFrameConfig` 的内部属性(例如 `mappedURL`)将决定所关联的 `` 内部加载的内容。此外: + +- 导航类型将是 `"replace"`(参见 {{domxref("NavigateEvent.navigationType")}}),这意味着当前历史记录条目将被新条目替换,而不是为其添加一个新的历史记录条目。 +- 导航的 {{httpheader("Referrer-Policy")}} 被设置为 `"no-referrer"`。 + +## 示例 + +要设置将在 `` 中显示的内容,使用 API(如[受保护的受众](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage))生成一个 `FencedFrameConfig` 对象,然后将其设置为 `` 的 `config` 属性值。 + +以下示例从受保护的受众 API 的广告拍卖中获取一个 `FencedFrameConfig`,然后使用它在 `` 中显示获胜的广告: + +```js +const frameConfig = await navigator.runAdAuction({ + // 拍卖配置 + resolveToConfig: true, +}); + +const frame = document.createElement("fencedframe"); +frame.config = frameConfig; +``` + +> [!NOTE] +> 在调用 `runAdAuction()` 时,必须传入 `resolveToConfig: true` 以获得 `FencedFrameConfig` 对象。如果没有设置,则所得的 {{jsxref("Promise")}} 将兑现为一个 URN,该 URN 只能在 {{htmlelement("iframe")}} 中使用。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.cn 上的[围栏框架](https://developers.google.cn/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox) diff --git a/files/zh-cn/web/api/htmlfencedframeelement/height/index.md b/files/zh-cn/web/api/htmlfencedframeelement/height/index.md new file mode 100644 index 00000000000000..4af45630704d7b --- /dev/null +++ b/files/zh-cn/web/api/htmlfencedframeelement/height/index.md @@ -0,0 +1,36 @@ +--- +title: HTMLFencedFrameElement:height 属性 +slug: Web/API/HTMLFencedFrameElement/height +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef +--- + +{{SeeCompatTable}}{{APIRef("Fenced Frame API")}} + +{{domxref("HTMLFencedFrameElement")}} 的 **`height`** 属性用于获取并设置对应 {{htmlelement("fencedframe")}} 元素的 `height` 属性的值,该属性指定了元素的高度。 + +嵌入内容的尺寸可能由 `` 的 {{domxref("HTMLFencedFrameElement.config", "config")}} 对象的内部 `contentWidth` 和 `contentHeight` 属性设置。在这种情况下,更改 `` 的 {{domxref("HTMLFencedFrameElement.width", "width")}} 或 `height` 将改变页面上嵌入容器的大小,但容器内的文档将按比例缩放以适应新的尺寸。嵌入文档报告的宽度和高度(即 {{domxref("Window.innerWidth")}} 和 {{domxref("Window.innerHeight")}})将保持不变。 + +## 值 + +以 CSS 像素为单位表示元素高度的字符串。默认值为 `150`。 + +## 示例 + +```js +const frame = document.createElement("fencedframe"); +frame.height = "320"; +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.cn 上的[围栏框架](https://developers.google.cn/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox) diff --git a/files/zh-cn/web/api/htmlfencedframeelement/index.md b/files/zh-cn/web/api/htmlfencedframeelement/index.md new file mode 100644 index 00000000000000..729182aa6567bc --- /dev/null +++ b/files/zh-cn/web/api/htmlfencedframeelement/index.md @@ -0,0 +1,57 @@ +--- +title: HTMLFencedFrameElement +slug: Web/API/HTMLFencedFrameElement +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef +--- + +{{SeeCompatTable}}{{APIRef("Fenced Frame API")}} + +**`HTMLFencedFrameElement`** 接口表示 Javascript 中的 {{htmlelement("fencedframe")}} 元素,且提供配置属性。 + +{{InheritanceDiagram}} + +## 实例属性 + +_从其父接口 {{domxref("HTMLElement")}} 继承属性。_ + +- {{domxref("HTMLFencedFrameElement.allow")}} {{experimental_inline}} + - : 获取并设置对应 `` 元素的 `allow` 属性值,该属性表示内容首次嵌入时应用的[权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)。 +- {{domxref("HTMLFencedFrameElement.config")}} {{experimental_inline}} + - : 一个 {{domxref("FencedFrameConfig")}} 对象,表示 {{htmlelement("fencedframe")}} 的导航,即其中将显示什么内容。`FencedFrameConfig` 是从诸如[受保护的受众 API](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience) 等来源返回的。 +- {{domxref("HTMLFencedFrameElement.height")}} {{experimental_inline}} + - : 获取并设置对应 `` 元素的 `height` 属性的值,该属性指定元素的高度。 +- {{domxref("HTMLFencedFrameElement.width")}} {{experimental_inline}} + - : 获取并设置对应 `` 元素的 `width` 属性的值,该属性指定元素的宽度。 + +## 示例 + +要设置将在 `` 中显示的内容,使用 API(如[受保护的受众](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage))生成一个 `FencedFrameConfig` 对象,然后将其设置为 `` 的 `config` 属性值。 + +以下示例从受保护的受众 API 的广告拍卖中获取一个 `FencedFrameConfig`,然后使用它在 `` 中显示获胜的广告: + +```js +const frameConfig = await navigator.runAdAuction({ + // 拍卖配置 + resolveToConfig: true, +}); + +const frame = document.createElement("fencedframe"); +frame.config = frameConfig; +``` + +> [!NOTE] +> 在调用 `runAdAuction()` 时,必须传入 `resolveToConfig: true` 以获得 `FencedFrameConfig` 对象。如果没有设置,则所得的 {{jsxref("Promise")}} 将兑现为一个 URN,该 URN 只能在 {{htmlelement("iframe")}} 中使用。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.cn 上的[围栏框架](https://developers.google.cn/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox) diff --git a/files/zh-cn/web/api/htmlfencedframeelement/width/index.md b/files/zh-cn/web/api/htmlfencedframeelement/width/index.md new file mode 100644 index 00000000000000..ab3dc228477fe0 --- /dev/null +++ b/files/zh-cn/web/api/htmlfencedframeelement/width/index.md @@ -0,0 +1,36 @@ +--- +title: HTMLFencedFrameElement:width 属性 +slug: Web/API/HTMLFencedFrameElement/width +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef +--- + +{{SeeCompatTable}}{{APIRef("Fenced Frame API")}} + +{{domxref("HTMLFencedFrameElement")}} 的 **`width`** 属性用于获取并设置对应 {{htmlelement("fencedframe")}} 元素的 `width` 属性的值,该属性指定了元素的宽度。 + +嵌入内容的尺寸可能由 `` 的 {{domxref("HTMLFencedFrameElement.config", "config")}} 对象的内部 `contentWidth` 和 `contentHeight` 属性设置。在这种情况下,更改 `` 的 `width` 或 {{domxref("HTMLFencedFrameElement.height", "height")}} 将改变页面上嵌入容器的大小,但容器内的文档将按比例缩放以适应新的尺寸。嵌入文档报告的宽度和高度(即 {{domxref("Window.innerWidth")}} 和 {{domxref("Window.innerHeight")}})将保持不变。 + +## 值 + +以 CSS 像素为单位表示元素宽度的字符串。默认值为 `300`。 + +## 示例 + +```js +const frame = document.createElement("fencedframe"); +frame.width = "480"; +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.cn 上的[围栏框架](https://developers.google.cn/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox)