iframe框架及优缺点
HTML5不再支持使用frame,关于frame与iframe的区别,可以参阅 iframe与frame的区别
基本使用
src:规定在iframe中显示的文档的URL。frameborder:规定是否显示框架周围的边框。scrolling:规定是否在 iframe 中显示滚动条。width:规定iframe的宽度,建议使用CSS替代。height:规定iframe的高度,建议使用CSS替代。sandbox:启用一系列对iframe中内容的额外限制。marginwidth:定义iframe的左侧和右侧的边距。marginheight:定义iframe的顶部和底部的边距。srcdoc:规定在iframe中显示的页面的HTML内容。align:规定如何根据周围的元素来对齐此框架,建议使用样式替代。
使用场景
加载其他域的网页
<iframe>是允许跨域请求资源的,但是不能够修改,由此可以在网页中嵌套其他网页,如需要跨域通信的话,需要考虑document.domain、window.name、window.postMessage。
典型系统结构
典型的系统结构,左侧是功能树,上部为个人信息,右侧就是实际功能,使用iframe将功能单独分离出来,当然也可以使用vue和react进行实现。
实现Ajax
可以使用iframe进行实现异步请求发送,来模拟Ajax的请求操作,Ajax的异步请求完成操作为XHR.readyState === 4执行callback,iframe使用iframe.onload执行callback,还可以实现一个轮询长连接。
加载广告
广告是与无关的,假如硬编码进去,会造成网页布局的紊乱,而且这样势必需要引入额外的css和js文件,极大的降低了网页的安全性,使用iframe便可以解决这些问题。
提交表单
可以使用iframe提交表单来避免整个页面的刷新,还可以实现无刷新文件上传的操作。
优缺点
优点
1、 可以跨域请求其他网站,并将网站完整展示出来
2、 典型系统结构可以提高代码的复用性
3、 创建一个全新的独立的宿主环境,可以隔离或者访问原生接口及对象
4、 模块分离,若多个页面引用同一个iframe,则便于修改操作
5、 实现广告展示的一个解决方案
6、 若需要刷新iframe则只需要刷新框架内,不需要刷新整个页面
缺点
1、 iframes阻塞页面加载,影响网页加载速度,iframe加载完毕后才会触发window.onload事件,动态设置src可解决这个问题。
2、 加载了新页面,增加了css与js文件的请求,即额外增加了HTTP请求,增加了服务器负担。
3、 有时iframe由于页面挤占空间的原因出现滚动条,造成布局混乱。
4、 不利于SEO,搜索引擎的爬虫无法解读iframe的页面。
5、 有些小型的移动设备如手机等无法完全显示框架,兼容性较差。
6、 iframe与主页面是共享链接池的,若iframe加载时用光了链接池,则会造成主页面加载阻塞。
参考
https://www.zhihu.com/question/20653055
https://tech.souyunku.com/hq233/p/9849939.html
https://blog.csdn.net/baxiadsy_csdn/article/details/86245809