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 autocomplete 使用手册
Apr 01 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
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写的求多项式导数的函数代码
2012/07/04 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
纯php生成随机密码
2015/10/30 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
php curl发送请求实例方法
2019/08/01 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
javascript 写类方式之三
2009/07/05 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python中map()与zip()操作方法
2016/02/27 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
材料工程专业毕业生求职信
2014/03/04 职场文书
会计工作决心书
2014/03/11 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
班级读书活动总结
2014/06/30 职场文书
个人专业技术总结
2015/03/05 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
Django操作cookie的实现
2021/05/26 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL