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为搜索栏增加tag提示
Jun 22 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
Apr 23 Javascript
详解javascript高级定时器
Dec 31 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序关键字变色实现代码实例
Dec 13 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
PHP4之COOKIE支持详解
2006/10/09 PHP
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python Opencv将图片转为字符画
2021/02/19 Python
python使用代理ip访问网站的实例
2018/05/07 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
python实现可变变量名方法详解
2019/07/01 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
Linux机考试题
2015/07/17 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
2015新员工试用期工作总结
2014/12/12 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书