<iframe>
HTML内联框架元素(<iframe>)表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。
浏览器支持
 |  |  |  |  |
所有主流浏览器都支持<iframe>标签。 | ||||
示例
标记一个内联框架：
<iframe src="https://www.lanmper.cn"></iframe>
标签定义及使用说明
<iframe>标签创建包含另一个文档的行内框架，被用来在当前 HTML 文档中嵌入另一个文档。- 可以把需要的文本放置在
<iframe>和</iframe>之间，这样就可以应对不支持<iframe>的浏览器。 - 使用 CSS 为
<iframe>（包括滚动条）定义样式。
脚本
内联的框架，就像<frame>元素一样，会被包含在window.frames伪数组（类数组的对象）中。
有了DOMHTMLIFrameElement对象，脚本可以通过contentWindow访问内联框架的window对象。contentDocument属性则引用了<iframe>内部的document元素，(等同于使用contentWindow.document），但IE8-不支持。
在框架内部，脚本可以通过window.parent引用父窗口对象。
脚本访问框架内容必须遵守同源策略，并且无法访问非同源的window对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的window对象。跨域通信可以通过window.postMessage来实现。
定位和缩放
作为一个可替换元素，可以使用object-position和object-fit来定位、对齐、缩放<iframe>元素内的文档。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| align | left right top middle bottom | HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的元素来对齐<iframe>。 |
| frameborder | 1 0 | HTML5 不支持。规定是否显示<iframe>周围的边框。 |
| height | pixels | 规定<iframe>的高度。 |
| longdesc | URL | HTML5 不支持。规定一个页面，该页面包含了有关<iframe>的较长描述。 |
| marginheight | pixels | HTML5 不支持。规定<iframe>的顶部和底部的边距。 |
| marginwidth | pixels | HTML5 不支持。规定<iframe>的左侧和右侧的边距。 |
| name | name | 规定<iframe>的名称。 |
| sandbox HTML5新增 | "" allow-forms allow-same-origin allow-scripts allow-top-navigation | 对<iframe>的内容定义一系列额外的限制。 |
| scrolling | yes no auto | HTML5 不支持。规定是否在<iframe>中显示滚动条。 |
| seamless HTML5新增 | seamless | 规定<iframe>看起来像是父文档中的一部分。 |
| src | URL | 规定在<iframe>中显示的文档的 URL。 |
| srcdoc HTML5新增 | HTML_code | 规定页面中的 HTML 内容显示在<iframe>中。 |
| width | pixels | 规定<iframe>的宽度。 |
HTML 4.01 与 HTML 5 之间的差异
HTML5 新增了一些新的属性，同时去掉了 HTML 4.01 中的一些属性。
HTML 与 XHTML 之间的差异
在 XHTML 中，name 属性已被废弃，并将被去掉。请使用 id 属性代替。
全局属性
<iframe>标签支持HTML 的全局属性。
事件属性
<iframe>标签支持HTML 的事件属性。
无障碍环境
使用<iframe>的title属性来标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。框架的标题应该清楚地描述框架的内容，例如：
<iframe src="https://en.wikipedia.org/wiki/avocado"></iframe>
如果没有标题，他们就只能浏览每一个框架来获取需要的内容。这非常耗时间，也很容易让人迷惑，尤其是当页面中包含很多框架或者互动内容如音视频等的时候。
例子
<iframe src="/index"></iframe>
下面的例子中，我们创建了一个框架。当用户点击框架中的按钮时，浏览器会弹出一个提示框。
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents" width="400" height="300"> <p>your browser does not support iframes.</p> </iframe>
下面的例子演示了在框架中展示谷歌地图。
<base target="_blank">
<iframe id="example2"
width="400"
height="300"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="https://maps.google.com/maps?f=q&source=s_q&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=utf8&hq=&hnear=buenos+aires,+argentina&z=11&ll=-34.603723,-58.381593&output=embed">
</iframe>
<br>
<small>
<a href="https://maps.google.com/maps?f=q&source=embed&hl=es-419&geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&ie=utf8&hq=&hnear=buenos+aires,+argentina&z=11&ll=-34.603723,-58.381593" style="color:#0000ff;text-align:left"> see bigger map </a>
</small>