在页面中使用 iframe

iframe 是框架的一种形式，也比较常用，它提供了一个简单的方式把一个页面的内容嵌入到另一个页面中。 iframe 一般用来包含别的页面。

HTML5 废弃了 iframe 元素中控制样式的属性（如 align 、 scrolling 、 marginheight 等），补充了两个新属性： seamless 和 sandbox 。

seamless

seamless 的中文意思是指无缝，前面曾讲过，两个文档之间是隔离的，这个布尔属性可让 iframe 元素中引用的文档（即子文档）成为父文档（ iframe 元素所在的文档）的一部分。当添加了这个属性后，父文档中的 CSS 能够影响子文档中的样式。不过这个属性的兼容性非常差，几乎没有浏览器支持此属性。

sandbox

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 标签时显示。

设置 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> 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差

• 很多的移动设备（ pad 、手机）无法完全显示框架，设备兼容性差

• 浏览器对同一域名的并发请求数是有限制的， iframe 中的文档（即子文档）与父文档会共享连接，也就是说子文档和父文档的请求数会计算在一起，当并发请求数达到上限值时，子文档中的资源只能等待，直到前面的通信完成

• 制造点击劫持（ ClickJacking ），将一个不可见的 iframe 或包含用户感兴趣内容的 iframe 覆盖在文档的某个位置上，诱使用户点击 iframe 中的内容

• 阻塞父窗口的 load 事件，还是上面的例子，去掉子文档中的 img 元素， load 事件的触发时间马上缩短了一半

• 脚本的执行是同步和阻塞的，将 script 元素放置于 iframe 之前，同样也会阻塞 iframe 中资源的请求

应用场景

内联框架主要在以下 4 个场景中使用。

• 沙箱隔离
• 在移动端，可用 iframe 唤起客户端的某个功能，例如 Hybrid App 中常用的 JSBridge ，通过动态添加 iframe 元素，再定义 src 属性，最后发起请求来唤起某个功能
• 跨域通信，通过在 URL 中传递参数实现跨域，但这种方式将数据暴露了出来，并且传输量有限，数据类型也有限制，如以下代码所示。 HTML5 中新增的跨文档消息传递（ cross-document messaging ）功能可以弥补跨域的不足
• 实现长轮询，可用于设备监控、文字直播等。不过这种方式是用 HTTP 来模拟请求和响应，因此每次都会带完整的请求首部（包括 cookie 信息），增加了传输量，并且服务器端和客户端实现起来比较复杂。不过， HTML5 新增了 WebSocket ，可以取代 iframe 的长轮询
• 引用第三方内容，比如加载广告
• 独立的带有交互的内容，比如幻灯片
• 需要保持独立焦点和历史管理的子窗口，如复杂的 Web 应用
• 无刷新文件上传，过去不能直接处理上传按钮中的本地文件，为了不刷新窗口也能上传，只能通过 iframe 元素来做中介