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

前端技术 2023/09/06 JavaScript

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

本文地址：https://www.stayed.cn/item/16521

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案