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+ajax 购物车框架(入门篇)
Oct 29 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
JavaScript中严格判断NaN的方法
Feb 16 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 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+xml实现在线英文词典查询的方法
2015/01/23 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
vue v-model的用法解析
2020/10/19 Javascript
Python三级目录展示的实现方法
2016/09/28 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
求职自荐书范文
2013/12/04 职场文书
善意的谎言事例
2014/02/15 职场文书
师德建设实施方案
2014/03/21 职场文书
投标诚信承诺书
2014/05/26 职场文书
财务审计整改报告
2014/11/06 职场文书
婚庆答谢词
2015/01/04 职场文书
大学生入党自荐书
2015/03/05 职场文书
反邪教观后感
2015/06/11 职场文书
给校长的建议书范文
2015/09/14 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android