前端3+1(Day7)
前端3+1(Day7)
iframe框架有哪些优缺点
功能：
-
用来实现长连接
-
跨域通信
-
历史记录管理
-
纯前端的utf8和gbk编码互转
-
无刷新文件上传
-
网页调起客户端应用
-
创建一个全新的独立的宿主环境
-
IE6下用于遮罩select
实现长连接：
当websocket不可用时作为一种替代，最开始有google发明
补充：
websocket:一种网络通信协议，是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议
为什么需要websocket
-
HTTP协议是一种无状态的，无连接的，单向的应用层协议。它采用请求/响应模式。通信请求只可以由客户端发起，服务端对请求做出应答处理，带来的弊端，HTTP协议无法实现服务器主动向客户端发起消息，这种单向请求特点，注定了如果服务器又连续的变化状态，客户端要获知就非常麻烦。大部分web应用将会通过JavaScript异步和xml（AJAX）来实现长轮询。轮询效率低，非常浪费资源
-
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加载完成以后才触发，会造成页面阻塞
