🗒️<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>，但需要检查是否存在性能问题。

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

<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>

试验中：

browsingtopics
credentialless
csp

已废弃：

longdesc
scrolling 行为
样式
1. align
2. frameborder
3. marginheight
4. marginwidth
allowpaymentrequest

3. 脚本

对于父文档：

window.frames 伪数组（array-like object）里，就包含着内联 frames
属性 contentWindow 即 iframe 资源的 window 对象
属性 contentDocument 即 iframe 内的 document，等价于 contentWindow.document

对于被嵌入的 iframe：

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

Previous替换元素 NextHTML 元数据

Last updated 1 year ago

1. browsing context

2. 属性

3. 脚本

4. 定位和缩放

5. error 和 load 事件行为

5. `error` 和 `load` 事件行为