mdn · yin1999 · May 4, 2024 · Apr 23, 2024 · Apr 24, 2024 · Apr 24, 2024
@@ -0,0 +1,42 @@
+---
+title: HTMLIFrameElement：allowFullscreen 属性
+slug: Web/API/HTMLIFrameElement/allowFullscreen
+l10n:
+ sourceCommit: 17abe1c7a64248b77998643433cb3285ae937c6e
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLIFrameElement")}} 接口的 **`allowFullscreen`** 属性是一个反映了 {{HTMLElement("iframe")}} 元素的 `allowfullscreen` 属性的布尔值，它表示 iframe 的内容是否允许使用 {{domxref("Element.requestFullscreen", "requestFullscreen()")}}。
+
+> **备注：** 此属性被视为遗留属性。请改用 `allow="fullscreen"` 和 {{domxref("HTMLIFrameElement.allow")}}。
+
+## 值
+
+一个布尔值。
+
+## 示例
+
+```html
+<iframe id="el" allowfullscreen></iframe>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.allowFullscreen); // 输出：true
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [全屏 API](/zh-CN/docs/Web/API/Fullscreen_API)
+- {{domxref("Element.requestFullscreen()")}}
+- [权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)
+- {{httpheader("Permissions-Policy/fullscreen", "fullscreen")}} 权限策略指令
@@ -0,0 +1,22 @@
+---
+title: HTMLIFrameElement：allowPaymentRequest 属性
+slug: Web/API/HTMLIFrameElement/allowPaymentRequest
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("HTML DOM")}}{{Deprecated_Header}}{{Non-standard_Header}}
+
+{{domxref("HTMLIFrameElement")}} 接口的 **`allowPaymentRequest`** 属性返回一个表示是否可以在跨源 iframe 上调用[支付请求 API](/zh-CN/docs/Web/API/Payment_Request_API) 的布尔值。
+
+## 值
+
+一个布尔值。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [支付请求 API](/zh-CN/docs/Web/API/Payment_Request_API)
@@ -0,0 +1,65 @@
+---
+title: HTMLIFrameElement：browsingTopics 属性
+slug: Web/API/HTMLIFrameElement/browsingTopics
+l10n:
+ sourceCommit: 81dbd6314e340cfff2a489b370a3ec6d53c74287
+---
+
+{{APIRef("HTML DOM")}}{{SeeCompatTable}}{{non-standard_header}}
+
+> **警告：** 此特性目前遭到两家浏览器厂商反对。有关反对详情，请参阅[标准立场](/zh-CN/docs/Web/API/Topics_API#标准立场)部分。
+
+{{domxref("HTMLIFrameElement")}} 接口的 **`browsingTopics`** 属性是一个指定当前用户选择的主题应与之关联的 {{htmlelement("iframe")}} 源请求一起以 {{httpheader("Sec-Browsing-Topics")}} 标头发送的布尔值。这反映了 `browsingtopics` HTML 属性。
+
+有关更多详细信息，请参阅[使用 Topics API](/zh-CN/docs/Web/API/Topics_API/Using)。
+
+## 值
+
+一个布尔值，默认值为 `false`；将其设置为 `true` 可使与 `<iframe>` 相关联的源请求携带一个包含当前用户选定主题的 {{httpheader("Sec-Browsing-Topics")}} 标头。
+
+## 示例
+
+### 获取
+
+将 `browsingtopics` 设置为 `true`，然后以声明方式加载 `<iframe>` 的内容：
+
+```html
+<iframe browsingtopics title="广告容器" src="adtech1.example"> ... </iframe>
+```
+
+通过脚本记录 `browsingTopics` 值：
+
+```js
+const iframeElem = document.querySelector("iframe");
+console.log(iframeElem.browsingTopics); // 将在支持的浏览器中返回 true
+```
+
+### 设置
+
+指定最小的 `<iframe>`：
+
+```html
+<iframe> ... </iframe>
+```
+
+将 `browsingtopics` 设置为 `true`，然后通过脚本加载 `<iframe>` 内容：
+
+```js
+const iframeElem = document.querySelector("iframe");
+
+iframeElem.browsingTopics = true;
+iframeElem.title = "广告容器";
+iframeElem.src = "adtech1.example";
+```
+
+## 规范
+
+此特性不属于官方标准，尽管它被定义在 [Topics API 非官方建议草案](https://patcg-individual-drafts.github.io/topics/)中。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [Topics API](/zh-CN/docs/Web/API/Topics_API)
@@ -0,0 +1,27 @@
+---
+title: HTMLIFrameElement：contentDocument 属性
+slug: Web/API/HTMLIFrameElement/contentDocument
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("HTML DOM")}}
+
+如果 iframe 及其父文档处于[同源](/zh-CN/docs/Web/Security/Same-origin_policy)，则返回一个 [`Document`](/zh-CN/docs/Web/API/Document)（即嵌套浏览上下文中的活动文档），否则返回 `null`。
+
+## contentDocument 示例
+
+```js
+const iframeDocument = document.querySelector("iframe").contentDocument;
+
+iframeDocument.body.style.backgroundColor = "blue";
+// 这样 iframe 就会变成蓝色。
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
@@ -1,20 +1,61 @@
 ---
-title: HTMLIFrameElement.contentWindow
+title: HTMLIFrameElement：contentWindow 属性
 slug: Web/API/HTMLIFrameElement/contentWindow
+l10n:
+ sourceCommit: fc169d56cd8590bdba25d61c5d4ba221e4c64d7c
 ---
 
 {{APIRef("HTML DOM")}}
 
-**`contentWindow`** 属性返回当前[HTMLIFrameElement](/zh-CN/docs/Web/API/HTMLIFrameElement)的[Window](/zh-CN/docs/Web/API/Window)对象。你可以使用这个`Window` 对象去访问这个 iframe 的文档和它内部的 DOM. 这个是可读属性，但是它的属性像全局`Window` 一样是可以操作的。
+**`contentWindow`** 属性返回 [HTMLIFrameElement](/zh-CN/docs/Web/API/HTMLIFrameElement) 的 [Window](/zh-CN/docs/Web/API/Window) 对象。
 
-## 关于 contentWindow 的示例
+该属性只读。
+
+## 值
+
+一个 [Window](/zh-CN/docs/Web/API/Window) 对象。
+
+## 描述
+
+访问由 `contentWindow` 返回的 {{domxref("Window")}} 受到[同源策略](/zh-CN/docs/Web/Security/Same-origin_policy)规定的规则约束，这意味着，如果与 iframe 父级同源，那么父级页面可以访问 iframe 的文档以及内部 DOM，如果它们跨源，则父页面对窗口属性的访问权限极其有限。有关详细信息，请参阅[跨源脚本 API 访问](/zh-CN/docs/Web/Security/Same-origin_policy#跨源脚本_api_访问)。
+
+通过与消息事件的 {{domxref("MessageEvent.source", "source")}} 属性进行比较，还可以使用该属性找出是哪个 iframe 页面发送了 {{domxref("Window.postMessage()")}}。
+
+## 示例
+
+### 访问 iframe 的文档
+
+此示例修改了文档主体的 `style` 属性。
+
+请注意，这只有在 iframe 的窗口与其父窗口同源的情况下才有效：否则，尝试访问 `contentWindow.document` 会出现异常。
 
 ```js
-var x = document.getElementsByTagName("iframe")[0].contentWindow;
-//x = window.frames[0];
+const iframe = document.querySelector("iframe").contentWindow;
+
+iframe.document.querySelector("body").style.backgroundColor = "blue";
+// 这将使文档中的第一个 iframe 变成蓝色。
+```
+
+### 将消息源映射到 iframe
+
+此示例可在包含多个 iframe 的页面中运行，其中任何一个都可以使用 {{domxref("Window.postMessage()")}} 发送信息。当页面接收到消息时，就会知道哪个 iframe 包含发送消息的窗口。
+
+为了做到这一点，当接收到消息时，页面首先检查消息是否来自预期的源，然后通过比较消息事件的 {{domxref("MessageEvent.source", "source")}} 属性和 iframe 的 `contentWindow` 属性来找到消息来自哪个 iframe。
+
+```js
+const expectedOrigin = "https://example.org";
+
+const iframes = Array.from(document.querySelectorAll("iframe"));
+
+window.addEventListener("message", (e) => {
+ if (e.origin !== expectedOrigin) return;
+
+ const sourceIframe = iframes.find(
+ (iframe) => iframe.contentWindow === e.source,
+ );
 
-x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
-// this would turn the 1st iframe in document blue.
+ console.log(sourceIframe);
+});
 ```
 
 ## 规范

@@ -0,0 +1,71 @@
+---
+title: HTMLIFrameElement：credentialless 属性
+slug: Web/API/HTMLIFrameElement/credentialless
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+
+{{domxref("HTMLIFrameElement")}} 接口的 **`credentialless`** 属性表示 {{htmlelement("iframe")}} 是否无凭据，这意味着其中的文档将使用新的临时上下文加载。
+
+这些上下文无法访问与其源关联的网络、cookie 和存储数据。相反，它们使用与顶层文档生命周期相关的新的上下文。这意味着用户导航离开页面或重新加载页面后，任何存储的数据都将不可访问。
+
+作为回报，设置了 {{httpheader("Cross-Origin-Embedder-Policy")}}（COEP）的文档可以取消第三方文档的嵌入规则，这些第三方文档没有设置 COEP。有关更深入的解释，请参阅[无凭据 IFrame](/zh-CN/docs/Web/Security/IFrame_credentialless)。
+
+## 值
+
+一个布尔值。默认值为 `false`；将其设为 `true` 可使 `<iframe>` 为无凭据。
+
+## 示例
+
+### 获取
+
+像这样指定一个无凭据的 `<iframe>`：
+
+```html
+<iframe
+ src="https://zh.wikipedia.org/wiki/幽灵漏洞"
+ title="维基百科页面中的幽灵漏洞"
+ width="960"
+ height="600"
+ credentialless></iframe>
+```
+
+返回 `credentialless` 属性值：
+
+```js
+const iframeElem = document.querySelector("iframe");
+console.log(iframeElem.credentialless); // 将在支持的浏览器中返回 true
+```
+
+### 设置
+
+或者，在 HTML 中指定最少的详细信息：
+
+```html
+<iframe width="960" height="600"> </iframe>
+```
+
+将 `credentialless` 设置为 `true`，然后通过脚本加载 `<iframe>` 内容：
+
+```js
+const iframeElem = document.querySelector("iframe");
+
+iframeElem.credentialless = true;
+iframeElem.title = "维基百科页面中的幽灵漏洞";
+iframeElem.src = "https://zh.wikipedia.org/wiki/幽灵漏洞";
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [无凭据 IFrame](/zh-CN/docs/Web/Security/IFrame_credentialless)
+- {{htmlelement("iframe")}}
@@ -0,0 +1,22 @@
+---
+title: HTMLIFrameElement：csp 属性
+slug: Web/API/HTMLIFrameElement/csp
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+
+{{domxref("HTMLIFrameElement")}} 接口的 **`csp`** 属性指定了嵌入文档必须同意对自己执行的[内容安全策略](/zh-CN/docs/Web/HTTP/CSP)。
+
+## 值
+
+一个内容安全策略。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
@@ -0,0 +1,22 @@
+---
+title: HTMLIFrameElement：featurePolicy 属性
+slug: Web/API/HTMLIFrameElement/featurePolicy
+l10n:
+ sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
+
+{{DOMxRef("HTMLIFrameElement")}} 接口的 **`featurePolicy`** 只读属性返回 {{DOMxRef("FeaturePolicy")}} 接口。该接口提供一个简单的 API，用于检查应用于特定的 iframe [权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)。
+
+## 值
+
+[`FeaturePolicy`](/zh-CN/docs/Web/API/FeaturePolicy) 对象，可用于检查应用于 iframe 的权限策略设置。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
@@ -0,0 +1,42 @@
+---
+title: HTMLIFrameElement：height 属性
+slug: Web/API/HTMLIFrameElement/height
+l10n:
+ sourceCommit: d8a52569d8d465eb626af3d33600c8c638a7a322
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("HTMLIFrameElement")}} 接口的 **`height`** 属性返回一个反映 {{HTMLElement("iframe")}} 元素的 `height` 属性的字符串，表示 iframe 的 CSS 像素高度。
+
+## 值
+
+表示 iframe 高度的字符串（以 CSS 像素为单位）。
+
+## 示例
+
+```html
+<iframe id="el" width="800" height="600"></iframe>
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.height); // 输出：“600”
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLCanvasElement.height")}}
+- {{domxref("HTMLEmbedElement.height")}}
+- {{domxref("HTMLImageElement.height")}}
+- {{domxref("HTMLObjectElement.height")}}
+- {{domxref("HTMLSourceElement.height")}}
+- {{domxref("HTMLVideoElement.height")}}