通过iframe元素嵌套HTML页面，完美实现网页嵌入

iframe元素在页面中创建一个行内的框架，这个框架内部可以放置另外一个页面。在“动手写2.6.1”中，当前页面嵌套了另外一个名为iframe.html的页面：

动手写2.6.1 用iframe嵌套HTML页面

iframe元素具有表2.6.1中所列的属性：

表2.6.1　iframe元素的属性

项目中最常用的属性是src、width和height。

属性src设定子页面的URL地址，这个地址可以是本地文件地址，比如“动手写2.6.1”引入的iframe.html；也可以是一个外部URL，比如“动手写2.6.2”引入了百度首页。

动手写2.6.2 引入外部URL

属性width和height的值可以取一个百分比，这个百分比代表了父元素的宽度和高度。在“动手写2.6.3”中，iframe的父元素是body元素。它的宽度width设置成百分比100%，那么它将水平占满整个屏幕；它的高度height设置为400，那么它的高度将是400个像素。

动手写2.6.3 设置iframe宽高

提示

如果把“动手写2.6.3”中iframe的高度设为100%，此时会发现没效果，这是因为它的父元素body没有设置高度。我们前面提到，body的高度是根据子元素的高度计算的，通过CSS样式给body加一个高度，iframe的百分比高度就可以生效了。

name属性的值可以作为链接元素a的目标，当链接被点击时，链接地址的页面将替换成iframe中的内容。在“动手写2.6.4”中，iframe的名称name是iframe_test，链接元素a将属性target也设为iframe_test，点击链接后，iframe的网页内容将替换成链接元素a所指向的内容：

动手写2.6.4 iframe设置name

iframe中的子页面不会继承父页面的CSS样式。在“动手写2.6.5”中，外层页面的p元素被head中定义的CSS样式影响，iframe内嵌页面的p元素则未被影响：(www.xing528.com)

动手写2.6.5 外层页面CSS不影响iframe内页面

本例在浏览器中的效果如图2.6.1所示：

图2.6.1　iframe子页面不继承父页面CSS样式

HTML5中曾新增一个名为seamless的iframe属性，该属性可以让iframe中的子页面表现得像父页面的一个元素，从而继承父页面的样式。但出于种种考虑，W3C最终还是移除了这一属性，目前所有的主流浏览器都已不支持该属性。在很多HTML5的教程中仍然列出了该属性，这都是错误的。

属性srcdoc和sandbox是HTML5中新增的，在实际项目中使用不多，有兴趣的读者可以自己试一试效果。

在HTML4标准中，iframe还曾有其他属性，比如设置iframe位置的属性align。但这些属性在HTML5中已经被废弃，以后的浏览器也可能不会再支持这些属性，因此不推荐使用。这些废弃属性主要用于设置iframe的展示效果，可以被CSS样式表替换。

iframe能够帮我们复用组件。比如在大部分网站中，不同页面的头部菜单栏往往是相同的，因此我们可以先把头部制作成单独的页面，然后通过iframe引入各个页面，避免因重复编写代码浪费时间和精力。“动手写2.6.6”和“动手写2.6.7”共用了文件header.html作为头部，这样就减少了很多重复的代码，浏览器中的结果如图2.6.2和图2.6.3所示。

动手写2.6.6 共用头部页面1

动手写2.6.7 共用头部页面2

图2.6.2　“动手写2.6.6”显示结果

图2.6.3　“动手写2.6.7”显示结果

但是，iframe也会产生一些特殊问题，比如JavaScript的子页面跨域问题、意外的滚动条等。所以，现在大型网站的页面很少使用iframe制作。目前，iframe主要被用于一些内部管理系统中。