iframe 是框架的一种形式,也比较常用,它提供了一个简单的方式把一个页面的内容嵌入到另一个页面中。 iframe 一般用来包含别的页面。
HTML5 废弃了 iframe 元素中控制样式的属性(如 align 、 scrolling 、 marginheight 等),补充了两个新属性: seamless 和 sandbox 。
seamless 的中文意思是指无缝,前面曾讲过,两个文档之间是隔离的,这个布尔属性可让 iframe 元素中引用的文档(即子文档)成为父文档( iframe 元素所在的文档)的一部分。当添加了这个属性后,父文档中的 CSS 能够影响子文档中的样式。不过这个属性的兼容性非常差,几乎没有浏览器支持此属性。
sandbox 属性用于指定嵌套内容的安全规则,也就是对内嵌文档中的插件、表单、脚本、链接等进行限制,保证文档浏览的安全性。如果定义为空字符串,就会启用所有的限制;如果要定义多个,可以用空格分隔。
属性名 | 值 | 说明 |
---|---|---|
frameborder | 1/0 | 规定是否显示框架周围的边框 |
height | pixels % | 规定 iframe 的高度 |
longDesc | URL | 规定一个页面,该页面包含了有关 iframe 的长描述 |
name | frame_name | 规定 iframe 的名称 |
src | URL | 规定在 iframe 中显示的文档的 URL |
width | pixels % | 定义 iframe 的宽度 |
iframe 标签是成对出现的,以 <iframe>
开始,以 </iframe>
结束,并且 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。可以把需要的文本放置在
<iframe>
和 </iframe>
之间,这样就可以应对无法理解 iframe 的浏览器, iframe 标签内的内容可以作为浏览器不支持 iframe 标签时显示。
background-color=transparent
frameset 元素可定义一个框架集,用来组织多个窗口(框架),每个框架存有独立的文档。在其最简单的应用中, frameset 元素仅仅会规定在框架中集中存在多少列或多少行,因此必须使用 cols 或 rows
属性。目前,所有浏览器都支持 <frameset>
标签。
设计水平框架与垂直框架类似,也需要使用 frameset 框架集,但需要用到其 rows 属性。
嵌套的 frameset 来设置其 cols 属性,即垂直框架,以达到水平框架与垂直框架混合的效果。
<noframes>
标签noframes 元素可为那些不支持框架的浏览器显示文本。 noframes 元素位于 frameset 元素的内部。 noframes 标签是成对出现的,以 <noframes>
开始,以 </noframes>
结束,所有浏览器都支持 <noframes>
标签。
可利用 <iframe>
解决 ajax 跨域问题
<iframe>
中的内容,所以使用 <iframe>
会不利于搜索引擎优化。
<iframe>
框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差内联框架主要在以下 4 个场景中使用。