iframe如何动态创建及释放其所占内存


Posted in Javascript onSeptember 03, 2014

最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(RIA)应用程序,页面中大量调用iframe。后期测试发现浏览器内存一直居高不下,而且打开iframe页面越多内存占用越大,在IE系列浏览器中尤其明显。所有打开的iframe页面即使关闭了,内存使用也没有明显的下降,IE浏览器在内存占用达到400M左右就变得很卡。分析发现是iframe没有释放造成的,于是对所有已关闭的iframe所占用的内存进行释放,虽然不能完全释放,但是iframe内存占用量不会一直增长,整个应用内存使用量控制在150M左右。

/** 
* 动态创建iframe 
* @param dom 创建iframe的容器,即在dom中创建iframe。dom可以是div、span或者其他标签。 
* @param src iframe中打开的网页路径 
* @param onload iframe加载完后触发该事件,可以为空 
* @return 返回创建的iframe对象 
*/ 
function createIframe(dom, src, onload){ 
//在document中创建iframe 
var iframe = document.createElement("iframe"); 

//设置iframe的样式 
iframe.style.width = '100%'; 
iframe.style.height = '100%'; 
iframe.style.margin = '0'; 
iframe.style.padding = '0'; 
iframe.style.overflow = 'hidden'; 
iframe.style.border = 'none'; 

//绑定iframe的onload事件 
if(onload && Object.prototype.toString.call(onload) === '[object Function]'){ 
if(iframe.attachEvent){ 
iframe.attachEvent('onload', onload); 
}else if(iframe.addEventListener){ 
iframe.addEventListener('load', onload); 
}else{ 
iframe.onload = onload; 
} 
} 

iframe.src = src; 
//把iframe加载到dom下面 
dom.appendChild(iframe); 
return iframe; 
} 

/** 
* 销毁iframe,释放iframe所占用的内存。 
* @param iframe 需要销毁的iframe对象 
*/ 
function destroyIframe(iframe){ 
//把iframe指向空白页面,这样可以释放大部分内存。 
iframe.src = 'about:blank'; 
try{ 
iframe.contentWindow.document.write(''); 
iframe.contentWindow.document.clear(); 
}catch(e){} 
//把iframe从页面移除 
iframe.parentNode.removeChild(iframe); 
}
Javascript 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 #Javascript
jquery制作select列表双向选择示例代码
Sep 02 #Javascript
一个获取第n个元素节点的js函数
Sep 02 #Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 #Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 #Javascript
JavaScript判断文件上传类型的方法
Sep 02 #Javascript
JavaScript中九种常用排序算法
Sep 02 #Javascript
You might like
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
javascript打印输出json实例
2013/11/11 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
班级学习雷锋活动总结
2014/07/04 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
个人廉洁自律总结
2015/03/06 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL