Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Dec 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions files/zh-cn/web/api/htmlfencedframeelement/allow/index.md
Original file line number Diff line number Diff line change
@@ -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)
51 changes: 51 additions & 0 deletions files/zh-cn/web/api/htmlfencedframeelement/config/index.md
Original file line number Diff line number Diff line change
@@ -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)
36 changes: 36 additions & 0 deletions files/zh-cn/web/api/htmlfencedframeelement/height/index.md
Original file line number Diff line number Diff line change
@@ -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)
57 changes: 57 additions & 0 deletions files/zh-cn/web/api/htmlfencedframeelement/index.md
Original file line number Diff line number Diff line change
@@ -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)
36 changes: 36 additions & 0 deletions files/zh-cn/web/api/htmlfencedframeelement/width/index.md
Original file line number Diff line number Diff line change
@@ -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)