iframe如何动态创建及释放其所占内存_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);
}

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索iframe
, 释放内存
动态创建
javascript iframe、javascript获取iframe、javascript操作iframe、javascript刷新iframe、javascript创建iframe,以便于您获取更多的相关知识。

时间: 2024-10-31 20:02:03

iframe如何动态创建及释放其所占内存_javascript技巧的相关文章

PHP使用方法重载实现动态创建属性的get和set方法_javascript技巧

在PHP中,我们不能够直接通过方法名相同,签名不同的方法来实现方法重载,因为PHP是弱数据类型,不能很好的区分签名.但是,可以在PHP的类中运用__call()方法来实现方法重载.当调用一个类中并不存在的方法时,会自动调用__call()方法,其形式为__call($name,$arguments) 其中$name是方法的名称,$arguments是一个数组类型的参数. 下面的例子是使用PHP的方法重载来动态创建get和set方法.(在面向对象编程中,一个类中的属性会使用get和set来赋值,但

javascript实现dom动态创建省市纵向列表菜单的方法_javascript技巧

本文实例讲述了javascript实现dom动态创建省市纵向列表菜单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

js动态创建及移除div的方法_javascript技巧

本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementByIdx_x("newD")!=null) document.body.removeChild(document.getElementByIdx_x("newD")); var Div = document.create_rElement("div");/

基于JavaScript实现动态创建表格和增加表格行数_javascript技巧

在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

通过JS动态创建一个html DOM元素并显示_javascript技巧

近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个

Javascript动态创建表格及删除行列的方法_javascript技巧

本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

js动态创建表格,删除行列的小例子_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

基于JS判断iframe是否加载成功的方法(多种浏览器)_javascript技巧

推荐阅读: JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来.这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面: ie浏览器 IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,

JS 动态加载脚本的4种方法_javascript技巧

如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4种比较常用的方法,大家可以根据情况选择,最后 将会给推荐一个.1.直接document.write 复制代码 代码如下: <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 复制代