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 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
基本DOM节点操作
Jan 17 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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自动选择 连接本地还是远程数据库
2010/12/02 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JavaScript中的闭包
2016/02/24 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
使用Python的PIL模块来进行图片对比
2016/02/18 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Python列表(List)知识点总结
2019/02/18 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python如何实现强制数据类型转换
2019/11/22 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
工厂保安员岗位职责
2014/01/31 职场文书
校园文化建设方案
2014/02/03 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
高中物理教学反思
2014/02/08 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
路政管理求职信
2014/06/18 职场文书
无房证明样本
2015/06/17 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
MySQL系列之六 用户与授权
2021/07/02 MySQL
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
Nginx报404错误的详细解决方法
2022/07/23 Servers