[zh-cn]: create docs for HTMLFencedFrameElement (#24643)

Co-authored-by: Jason Ren <[email protected]>

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)

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`）将决定所关联的 `<fencedframe>` 内部加载的内容。此外：
+
+- 导航类型将是 `"replace"`（参见 {{domxref("NavigateEvent.navigationType")}}），这意味着当前历史记录条目将被新条目替换，而不是为其添加一个新的历史记录条目。
+- 导航的 {{httpheader("Referrer-Policy")}} 被设置为 `"no-referrer"`。
+
+## 示例
+
+要设置将在 `<fencedframe>` 中显示的内容，使用 API（如[受保护的受众](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage)）生成一个 `FencedFrameConfig` 对象，然后将其设置为 `<fencedframe>` 的 `config` 属性值。
+
+以下示例从受保护的受众 API 的广告拍卖中获取一个 `FencedFrameConfig`，然后使用它在 `<fencedframe>` 中显示获胜的广告：
+
+```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)

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` 属性的值，该属性指定了元素的高度。
+
+嵌入内容的尺寸可能由 `<fencedframe>` 的 {{domxref("HTMLFencedFrameElement.config", "config")}} 对象的内部 `contentWidth` 和 `contentHeight` 属性设置。在这种情况下，更改 `<fencedframe>` 的 {{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)

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}}
+  - : 获取并设置对应 `<fencedframe>` 元素的 `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}}
+  - : 获取并设置对应 `<fencedframe>` 元素的 `height` 属性的值，该属性指定元素的高度。
+- {{domxref("HTMLFencedFrameElement.width")}} {{experimental_inline}}
+  - : 获取并设置对应 `<fencedframe>` 元素的 `width` 属性的值，该属性指定元素的宽度。
+
+## 示例
+
+要设置将在 `<fencedframe>` 中显示的内容，使用 API（如[受保护的受众](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage)）生成一个 `FencedFrameConfig` 对象，然后将其设置为 `<fencedframe>` 的 `config` 属性值。
+
+以下示例从受保护的受众 API 的广告拍卖中获取一个 `FencedFrameConfig`，然后使用它在 `<fencedframe>` 中显示获胜的广告：
+
+```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)

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` 属性的值，该属性指定了元素的宽度。
+
+嵌入内容的尺寸可能由 `<fencedframe>` 的 {{domxref("HTMLFencedFrameElement.config", "config")}} 对象的内部 `contentWidth` 和 `contentHeight` 属性设置。在这种情况下，更改 `<fencedframe>` 的 `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)