iframe标签

iframe标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

sandbox：
“” 启用所有限制条件
allow-same-origin 允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。
allow-top-navigation 嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。
allow-forms 允许表单提交。
allow-scripts 允许脚本执行。
srcdoc：
规定页面中的 HTML 内容显示在 中。

应用场景:
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。

2：ajax上传文件。

3：加载别的网站内容，例如google广告。

4： 在上传图片时，不用flash实现无刷新。

5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。(跨域：跨域是指从一个域名的网页去请求另一个域名的资源。比如http://www.baidu.com/ 页面去请求 http://www.google.com 的资源。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。)
优点：
1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点：
1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；
2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；
3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；
4.产生多个页面，不易管理；
5.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

为什么尽量少使用iframe：
iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。
1.iframes阻塞页面加载，影响网页加载速度及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload事件加载延迟后，它给用户的感觉就是这个网页非常慢。window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发，就会影响网页加载速度。通过 JavaScript 动态设置 iframe的SRC可以避免这种阻塞情况。
2.唯一的连接池
对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加了。Safari 3+和Opera 9+增至4个，Chrome 1+、IE 8及Firefox 3增至6个。在大多数浏览器中，连接被主页面和它的 iframe所共享，这意味着有可能iframe中的资源占用了可用连接而阻塞了主页面的资源加载。如果iframe中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下iframe中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给iframe的src赋值。
总之，iframe会给你的页面性能带来冲击，尽可能不使iframe，当确实需要时，谨慎地使用他们。目前框架的优点可以使Ajax实现，这在某种角度也是一种替代方案。