iframe
<iframe src='url'></iframe>
常用属性
name ‘名称’
width
height
src
frameborder 边框 1,.0
align 对齐
scrolling 滚动条 （yes ,no,auto)
sandbox 启用一系列对iframe中内容 的限制
marginwidth 左边和右边的边距
marginheight 顶部和底部 的边距
srcdoc iframe中显示的页面HTML内容
加载其他域页面
iframe 允许跨域请求资源的，但是不能够修改，由此可以在网页中嵌套其他页面，如需要跨域通信，需要考虑document.domain ,window.name,window.postmessage
典型系统结构
典型的系统结构，左侧是功能树，上部为个人信息，右侧就是实际功能，使用iframe将功能单独分离出来，当然也可以使用vue和react进行实现。
实现Ajax
可以使用iframe进行实现异步请求发送，来模拟ajax的请求操作，Ajax的异步请求完成操作为XHR.readystate === 4 执行callback iframe 使用iframe.onload执行callback,还可以执行轮询长链接
提交表单
使用iframe提交表单，避免整个页面的刷新，还可以实现无刷新文件上传的操作
iframe 优点
1 可以跨域请求其它网站，并将网站完整展示出来
2 典型系统结构提高代码的复用性，减少代码重复（header,footer）
3 创建一个全新独立的宿主环境，可以隔离或者访问原生接口及对象
4 模块分离 多个页面引用同一个iframe便于修改操作
5 实现广告展示的一个解决方案
6 若刷新iframe 只需要刷新框架内 ，不需要刷新整个页面
8 重载页面时不需要重载整个页面，只需要重载页面中的一个框架（减少数据传输，减少加载时间）
7 简单，方便 应用于不需要搜索引擎来搜索页面
iframe 缺点
1 iframes 阻塞页面加载。影响网页加载速度，iframe加载完毕后才会触发window.onload事件，动态设置src可以解决这个问题
2 加载新页面，增加css，js文件的请求 即额外增加了http请求，增加了服务器的负担
3 有时iframe由于页面挤占的原因出现了滚动条，造成布局混乱
4 不利于SEO 搜索引擎的爬虫无法解读iframe的页面
5 有些小型的移动设备 手机…无法完全显示框架，兼容性差
6 iframe 与主页面的共享连接的,若iframe加载时用光了连接池，会造成主页面加载阻塞。
7 产生很多页面 不易于管理
8 不容易打印
9 浏览器后退按钮无效
iframe 原本用法现在看来是不合时宜 ，问题太多了， 不一一举例，但是它的功能是不错的黑魔法，
1 用来实现长链接,在websocket不可用的时候作为一种替代，最开始goole发明 Comet：基于 HTTP 长连接的“服务器推”技术
2 跨域通信 比如用户打开多个页面 应该只有一个在播放
3 历史记录管理 解决ajax化网站响应浏览器前进后退按钮方案， 在html5的history api 不可用时作为一种代替
4 纯前端的utf8 和 gbk 编码互转。 比如在utf8 页面生成一个gbk的encodeURlcompoment字符串，可以通过页面加载一个gbk的iframe然后主页面与子页面通信的方式实现转换的方式，这样就不用再页面插入一个巨大的编码映射表，子页内容；
<!doctype html
最低0.47元/天 解锁文章
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
