前端3+1(Day7)

前端3+1(Day7)

iframe框架有哪些优缺点

功能：

• 用来实现长连接

• 跨域通信

• 历史记录管理

• 纯前端的utf8和gbk编码互转

• 无刷新文件上传

• 网页调起客户端应用

• 创建一个全新的独立的宿主环境

• IE6下用于遮罩select

实现长连接：

当websocket不可用时作为一种替代，最开始有google发明

补充：

websocket:一种网络通信协议，是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议

为什么需要websocket

1. HTTP协议是一种无状态的，无连接的，单向的应用层协议。它采用请求/响应模式。通信请求只可以由客户端发起，服务端对请求做出应答处理，带来的弊端，HTTP协议无法实现服务器主动向客户端发起消息，这种单向请求特点，注定了如果服务器又连续的变化状态，客户端要获知就非常麻烦。大部分web应用将会通过JavaScript异步和xml（AJAX）来实现长轮询。轮询效率低，非常浪费资源

2. websocket 允许客户端与服务端之间进行全双工通信，以便任一方都可以建立连接将数据推送到另一端。websocket只需要建立一次，并且可以一直保持连接，效率大大提升

跨域通信：

可以实现跨域，每个iframe的源都可以不同（方便引入第三方内容）

什么是跨域：

JavaScript因为安全方面的问题，不允许跨域调用其他页面的对象，但是因为安全限制，也给AJAX和iframe带来了问题。

跨域：JavaScript同源策略的限制，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。

URL	说明	是否允许通信
http://www.a.com/a.js， http://www.a.com/b.js	同一域名	允许
http://www.a.com/lab/a.js, http://www.a.com/script/b.js	同一域名下的不同文件夹	允许
http://www.a.com:8000/a.js，http://www.a.com:8080/b.js	同一域名下的不同端口	不允许
http://www.a.com/a.js， https://www.a.com/b.js	同一域名下不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名	不允许
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

历史记录管理

解决ajax网站响应浏览器前进后退按钮方案，作为HTML5 history api 不可用时的一种替代

纯前端的utf8和gbk的编码互转

比如在utf8页面中需要生成一个gbk的encodeURLComponent字符串，可以通过页面加载一个gbk的iframe，然后主页面和子页面通信的实现转换，把iframe部署在父页面的同源服务上，就能在父页面直接调用iframe中的encoding接口了。

无刷新文件上传

在FormData不可用时作为一种替换方案

也就是实现异步刷新，单个iframe刷新不影响整个窗口的刷新

网页调起客户端应用

在iphone并不安全

创建一个全新的独立的宿主环境

用于隔离或者访问原始接口以及对象，例如，我们为了前端的安全问题，我们会覆盖一些原生都方法来防止恶意调用，那么就需要创建一个iframe，然后从iframe中取回原始对象和方法。

IE6下用于遮罩select

多页面应用时，对于共同的header，footer，可以使用iframe加载，拆分代码（导航栏应用）

缺点：

• 每一个iframe都对应一个页面，也就意味着多余的css，js文件的载入，会增加请求的开销

• 如果iframe有滚动条，会影响用户体验

• window.onload事件会在所有iframe加载完成以后才触发，会造成页面阻塞