HTML- 浅谈＜iframe＞标签的使用

标签 **HTML内联框架元素**表示嵌套的browsing context. 它可以能够将另一个HTML页面嵌套到当前页面当中。

Demo

<iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src=""https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

地图地址可以由google地图生成器生成。

iframe{
  border;1px solid black;
  width:100%;
  }
.output{
  background: #eee;
}

每一嵌入的浏览上下文(embedded browser context) 都有自己的会话历史记录(session history)和DOM树。包含嵌套内容的浏览器上下文称之为父级浏览上下文。顶级浏览上下文通常是由window对象表示的浏览器窗口。

属性

该元素包含全局属性。

1. allow 用于为指定其特征策略
2. allowfullscreen 设置为true时，可以通过调用的requestFullscreen() 方法激活全屏模式。现在被重新定义allow="fullscreen"
3. allowpaymentrequest 设置true,可以调用payment request API。 现被重新定义allow="payment".
4. csp 对嵌入的资源配置内容安全策略。
5. height 指定frame的高度，默认为150.
6. importent 表示的src属性指定的资源的加载优先级。其值：default/high/low.
7. name 用于定位嵌入的浏览上下文的名称。该名称可以用作标签和标签的target属性值，也可以用作标签和标签的formtarget属性值，也乐意用作window.open()方法的windowName的值。
8. referrerpolicy 表示在获取iframe资源时是如何发送referrer首部的。其值：no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url.
9. sandbox 该属性多呈现在iframe框架中的内容启用一些额外的限制条件。其值：allow-downloads-without-user-activation、allow-forms、allow-modals、allow-orientation-lock、allow-pointer-lock、allow-popups-to-escape-sandbox、allow-presentation、allow-same-origin、allow-scripts、allow-storage-access-by-user-activation、allow-top-navigation、allow-top-navigation-by-user-activation。
10. src 被嵌套的页面的URL地址。
11. srcdoc
12. width 默认值为300.
13. align 此元素相对于周围元素的对齐方式。被弃用
14. frameborder H5 弃用
15. longdesc 表示框架内容的长描述的URL。
16. marginheight
17. marginwidth
18. scrolling

脚本

有了DOMHTMLIFrameElement对象，脚本可以通过contentWindow访问内联框架的window对象。contentDocument属性则引用了内部的document元素，等同于contentWindow.document.

在框架内部，脚本可以通过window.parent引用父窗口对象。
脚本访问框架爱内容分必须遵守同源策略，跨域通信可以通过window.postMessage来实现。

定位和缩放

作为一个可替换的元素，可以使用object-positionn 和oeject-fit来定位，对齐，缩放元素内的文档。