嵌入全景的需求
我们在制作某个页面时，可能希望特定的一部分显示全景，就像本站的教程一样，在图文并茂之中还能嵌入一个全景。这时候我们可以使用iframe标签。例如下面的用法：
|
1 |
<iframe id="Iframe" src="http://imgd5.soufunimg.com/2015/04/22/gz/gebz/7449d608e8d045c6af940b6890ab4b59/tour.html" width="918" height="474" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe> |
注意 – 为了使得全屏切换在iframe中可用，我们加入了allowfullscreen参数。
HTML <iframe> 标签
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有浏览器都支持 <iframe> 标签。
定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
HTML 与 XHTML 之间的差异
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示和注释：
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 |
| frameborder |
|
规定是否显示框架周围的边框。 |
| height |
|
规定 iframe 的高度。 |
| longdesc | URL | 规定一个页面，该页面包含了有关 iframe 的较长描述。 |
| marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
| marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
| name | frame_name | 规定 iframe 的名称。 |
| sandbox |
|
启用一系列对 <iframe> 中内容的额外限制。 |
| scrolling |
|
规定是否在 iframe 中显示滚动条。 |
| seamless | seamless | 规定 <iframe> 看上去像是包含文档的一部分。 |
| src | URL | 规定在 iframe 中显示的文档的 URL。 |
| srcdoc | HTML_code | 规定在 <iframe> 中显示的页面的 HTML 内容。 |
| width |
|
定义 iframe 的宽度。 |
全局属性
<iframe> 标签支持 HTML 中的全局属性。
事件属性
<iframe> 标签支持 HTML 中的事件属性。
TIY 实例
- 内联框架
- 本例演示如何创建内联框架（HTML 页中的框架）。
相关页面
HTML DOM 参考手册：IFrame 对象
在 “使用iframe标签将全景嵌入到HTML页面” 上有 1 条评论