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 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
jquery 插件学习(五)
Aug 06 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python实现telnet服务器的方法
2015/07/10 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
了解一下python内建模块collections
2020/09/07 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
个人自我剖析材料
2014/02/07 职场文书
超市促销活动方案
2014/03/05 职场文书
软件项目开发计划书
2014/05/01 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
社会实践心得体会范文
2016/01/14 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL