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);
}
赞 (0)

相关推荐

  • JQuery1.4+ Ajax IE8 内存泄漏问题

    并且JQuery1.3.2版本不存在,JQuery1.4+版本存在 通过对比,最终找到这两个版本的其中一个差别 JQuery1.4+在ajax方法增加了一段代码,用于在abort时调用onreadystatechange方法 复制代码 代码如下: try { var oldAbort = xhr.abort; xhr.abort = function() { if ( xhr ) { oldAbort.call( xhr ); } onreadystatechange(); }; } catch

  • IE浏览器IFrame对象内存不释放问题解决方法

    最近项目组发现在使用showModalDialog弹出窗体中如果包含IFrame对象,则IFrame对象占用的内存资源在窗体关闭后不会释放.弹出关闭反复多次后,IE浏览器内存占用可超过数百M,严重时IE浏览器报错,且无法关闭,只能通过杀进程的方式重启浏览器.经测试,使用open方式弹出也存在该问题. 在IE8浏览器中,open和showModalDialog弹出的内存占用有差异: open方式弹出的窗体占用的是一个独立的iexplorer.exe进程: showModalDialog方式弹出的窗

  • IE8 内存泄露(内存一直增长 )的原因及解决办法

    最近开发的时候对页面使用了定时的局部更新,结果在ie6,7和Firefox下,一切正常,而在ie8下过上几个小时就浏览器就崩溃了,显示是内存溢出,我以为是代码写的不好导致内存泄露,但是ie6,7又正常,调查了一下,原来这是ie8的bug. 问题点 在IE8中,生成特定Dom节点所占用的内存是不会被释放的,即使这些节点被删除内存也不会被释放. 内存泄露的节点类型包括:form.button.input.select.textarea.a.img和objec 其他的大部分节点类型是不会泄露的,例如:

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

    最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(RIA)应用程序,页面中大量调用iframe.后期测试发现浏览器内存一直居高不下,而且打开iframe页面越多内存占用越大,在IE系列浏览器中尤其明显.所有打开的iframe页面即使关闭了,内存使用也没有明显的下降,IE浏览器在内存占用达到400M左右就变得很卡.分析发现是iframe没有释放造成的,于是对所有已关闭的iframe所占用的内存进行释放,虽然不能完全释放,但是iframe内存占用量不会一直增长,整个应用内存使用量控制在150M

  • C++中对象的动态建立与释放详解及其作用介绍

    C++中对象的动态建立与释放详解及其作用介绍

    目录 概述 对象的动态的建立和释放 案例 对象数组 vs 指针数组 对象数组 指针数组 概述 通过对象的动态建立和释放, 我们可以提高内存空间的利用率. 对象的动态的建立和释放 new 运算符: 动态地分配内存 delete 运算符: 释放内存 当我们用new运算符动态地分配内存后, 将返回一个指向新对象的指针的值. 我们可以通过这个地址来访问对象. 例如: int main() { Time *pt1 = new Time(8, 8, 8); pt1 -> show_time(); delet

  • javascript动态创建及删除元素的方法

    本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr

  • C# 中的动态创建组件(属性及事件)的实现思路及方法

    通常在写程序的时候,当要用到某些组件,采用的方法一般都是动态创建,用完以后就释放掉.Visual   C#在程序运行的时候也可以动态创建组件,下面就结合一个程序例子来具体介绍如何用Visual   C#动态生成组件.首先让我们了解一下,在动态创建组件的过程中要用到的一些概论和理论. 一．   Boxing   (装箱)和Unboxing   (出箱): 在用Visual   C#动态创建组件的时候,要涉及到二种数据类型变量的转换,这二种类型变量就是实值类型(Value   Type)变量和参考类

  • MFC中动态创建控件以及事件响应实现方法

    本文实例讲述了MFC中动态创建控件以及事件响应实现方法,分享给大家供大家参考.具体实现方法如下: 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个容器,一般是对话框,这时我们在对话框编辑窗口中,从工具窗口中拖出所需控件放在对话框中即可,再适当修改控件ID,设置控件属性,一个静态控件就创建好了,当对话框被显示时,其上的控件也会显示. 静态控件不需要调用Create()

  • Python-Flask:动态创建表的示例详解

    今天小编从项目的实际出发,由于项目某一个表的数据达到好几十万条,此时数据的增删查改会很慢:为了增加提高访问的速度,我们引入动态创建表. 代码如下: from app_factory import app from sqlalchemy import Column, String, Integer class ProjectModel(app.db.model, app.db.Mixin): tablename = 'Project_' ID = Column(String(50), name='

  • 动态创建Angular组件实现popup弹窗功能

    起步: 直接使用ngIf 把弹窗的DOM直接放在页面底下隐藏,通过ngIf这样的指令控制其显示. 改进: 封装成angular模块,通过服务控制其显示 直接使用ngIf的话,让人不爽的地方就在于不够通用,每个页面都得加DOM.改进的话可以把比较通用的一些DOM封装成组件,统一添加到全局页面中,并将显示的控制交给一个angular服务来控制其显示. 比如定义了两个组件(DialogComponent, AlertComponent),将他们都添加到AppComponent下,然后提供一个Popup

  • 详解Angular 4.x 动态创建组件

    动态创建组件 这篇文章我们将介绍在 Angular 中如何动态创建组件. 定义 AlertComponent 组件 首先,我们需要定义一个组件. exe-alert.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: "exe-alert", template: ` <h1>Alert {{type}}</h1> `, }) export cl

  • java使用JDBC动态创建数据表及SQL预处理的方法

    本文实例讲述了java使用JDBC动态创建数据表及SQL预处理的方法.分享给大家供大家参考,具体如下: 这两天由于公司的需求,客户需要自定义数据表的字段,导致每张表的字段都不是固定的而且很难有一个通用的模板去维护,所以就使用JDBC动态去创建数据表,然后通过表的字段动态添加数据,数据的来源主要是用户提供的Excel直接导入到数据库中. 如果考虑到字段的类型,可以通过反射的机制去获取,现在主要用户需求就是将数据导入到数据库提供查询功能,不能修改,所以就直接都使用String类型来处理数据更加便捷.

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

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

随机推荐