iframe如何动态创建及释放其所占内存

 更新时间:2014年09月03日 08:41:40   投稿:whsnow  
一个项目后期测试发现浏览器内存一直居高不下,而且打开iframe页面越多内存占用越大,在IE系列浏览器中尤其明显,下面与大家分享下iframe动态创建及释放内存

最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(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); 
}

相关文章

  • 关于JSON与JSONP简单总结

    关于JSON与JSONP简单总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。而JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”。下面是小编总结的关于JSON与JSONP知识,感兴趣的朋友一起看下吧
    2016-08-08
  • JavaScript Array.from及其相关用法详解(示例演示)

    JavaScript Array.from及其相关用法详解(示例演示)

    Array.from方法是ES6引入的一个静态方法,用于从类数组对象或可迭代对象创建一个新的数组实例,本文将详细介绍Array.from的基本用法、实际场景中的应用,以及它如何与其他JavaScript特性相结合提升代码的简洁性和可读性,感兴趣的朋友一起看看吧
    2025-03-03
  • JavaScript中正则表达式判断匹配规则及常用方法

    JavaScript中正则表达式判断匹配规则及常用方法

    JS作为一门常用于web开发的语言,必然要具备正则这种强大的特性,本文将对JS中的正则用法及常用函数进行一番总结
    2017-08-08
  • 微信小程序之swiper轮播图中的图片自适应高度的方法

    微信小程序之swiper轮播图中的图片自适应高度的方法

    这篇文章主要介绍了微信小程序之swiper轮播图中的图片自适应高度的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • javascript实现考勤日历功能

    javascript实现考勤日历功能

    这篇文章主要为大家详细介绍了javascript实现考勤日历功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Electron 结合 Selenium + chromedriver 驱动服务实现浏览器多开思路详解

    Electron 结合 Selenium + chromedriver 

    这篇文章主要介绍了Electron 结合 Selenium + chromedriver 驱动服务实现浏览器多开思路详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • JS实现用特殊符号替换字符串的中间部分区域的实例代码

    JS实现用特殊符号替换字符串的中间部分区域的实例代码

    相信很多人都遇到过敏感信息需要做部分隐藏功能,大多数都是用特殊符号去替换。今天小编给大家带来了JS实现用特殊符号替换字符串的中间部分区域的实例代码,需要的朋友参考下吧
    2018-07-07
  • JS实现简易留言板(节点操作)

    JS实现简易留言板(节点操作)

    这篇文章主要为大家详细介绍了JS实现简易留言板,节点进行操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • DEDECMS如何为文章添加HOT NEW标志图片

    DEDECMS如何为文章添加HOT NEW标志图片

    再用织梦建站的时候,常常需要要在列表页添加前两天的文章后面添加个new小图片,那么此功能是怎么实现的呢,下面通过本文给大家详解dedecms为文章添加HOT NEW标志图片,需要的朋友可以参考下
    2015-08-08
  • layui实现给某一列加点击事件

    layui实现给某一列加点击事件

    今天小编就为大家分享一篇layui实现给某一列加点击事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论