🗒️<iframe>

<iframe> 元素代表一个嵌套的 browsing context（浏览上下文），嵌入另一个 HTML 页面。每个被嵌入的 browsing context 都有自己的 document 并允许 URL 导航。嵌入的那个叫 parent browsing context。

1. browsing context

browsing context 就是浏览器显示 Document 的环境。在现代浏览器中，它通常是一个 tab，也可以是一个 window，甚至可以只是 page 的一部分（比如 frame 或 iframe）。每个 browsing context 都有一个 origin 和一个有序的历史记录。browsing contexts 之间的通信有受限制。在同 origin 的 browsing contexts 之间，可以使用 BroadcastChannel 。

注意：每个 browsing context 都是一个完整的 document 环境，因此页面中的每个 <iframe> 都需要增加 memory 和其它 computing resources。所以，虽然理论上我们可以使用任意数量的 <iframe>，但需要检查是否存在性能问题。

• https://developer.mozilla.org/en-US/docs/Web/API/Document

• https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

2. 属性

除了全局属性之外，还有：

Attribute Name	说明
name
width height
srcdoc	嵌入的 inline HTML。优先级高于 src 属性
src	嵌入的 page URL
sandbox	控制对 <iframe> 中嵌入内容所应用的限制 值为空表示用所有限制 也可以解除特定限制-多个值之间用空格分隔
allow	指定 Permissions Policy（权限策略） 该策略根据 request 的 origin 来定义 <iframe> 可以使用哪些功能 比如访问 microphone, camera, battery, web-share 等
referrerpolicy
allowfullscreen
loading

<iframe 
        allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-write; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" 
        srcdoc="<script src=&quot;https://xxx.js&quot; async></script><script src=&quot;https://xxx.js&quot; async></script>" 
        width="0" 
        height="0" 
        scrolling="no" 
        sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads" 
        title="st.iframe" 
        style="overflow: hidden; color-scheme: normal;">
</iframe>

试验中：

1. browsingtopics

2. credentialless

3. csp

已废弃：

1. longdesc

2. scrolling 行为

3. 样式

   1. align

   2. frameborder

   3. marginheight

   4. marginwidth

4. allowpaymentrequest

3. 脚本

对于父文档：

1. window.frames 伪数组（array-like object）里，就包含着内联 frames

2. 属性 contentWindow 即 iframe 资源的 window 对象

3. 属性 contentDocument 即 iframe 内的 document，等价于 contentWindow.document

对于被嵌入的 iframe：

1. window.parent 可以取到其 parent window 的引用

脚本访问 frame 的 content，是受 same-origin policy 约束的。如果脚本是从不同 origin 加载的，那么它就不能访问其它 window 对象中的大多数 properties。Cross-origin communication 可以通过 Window.postMessage() 来实现。

• https://developer.mozilla.org/en-US/docs/Web/API/Window

• https://developer.mozilla.org/en-US/docs/Web/API/Window/frames

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow

• https://developer.mozilla.org/en-US/docs/Web/API/Window/parent

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

4. 定位和缩放

作为 replaced element，可以使用属性 object-position 和 object-fit 来调整 iframe 元素框里 embedded document 的 position, alignment 和 scaling。

5. error 和 load 事件行为

在 <iframe>上触发的 error 和 load 事件，可用于探测 local network HTTP servers 的 URL space。因此，出于安全预防措施，用户代理不会在 <iframe> 上触发error事件，而 load 事件始终会被触发即使 <iframe> 的内容加载失败。

iframe.onload = function(){} ....
iframe.addEventListener('load', ()=>{})

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event