IE下使用jQuery重置iframe地址时内存泄露问题解决办法

页面中有个iframe:

 <iframe src=‘a.html‘></iframe>
<button>测试IFRAME泄露</button>

其中a.html内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<style>
.hack{
 /* 1.所有浏览器都有效 */
 background-color:green;
 /* 2.IE8~IE10,Opera有效,但是Opera兼容性可以不考虑 */
 background-color:blue\0;
 /* 3.IE9~IE10有效,与2组合,在2中先写针对IE8的,在此条中针对IE9|IE10 */
 background-color:red\9\0;
 /* 4.IE7有效,与23组合能区分出IE7/IE8/(IE9|IE10) */
 +background-color:yellow;
}
/* 针对IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
 .hack{
  background-color:pink;
 } 
}
 
</style>
</head>
<body>
后缀"\9"  IE6/IE7/IE8/IE9/IE10都生效
后缀"\0"  IE8/IE9/IE10都生效,是IE8/9/10的hack
后缀"\9\0"  只对IE9/IE10生效,是IE9/10的hack
前缀"*"  对IE7有效
前缀"+"  对IE7有效
选择器前缀 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
   针对IE10有效
<input type=‘text‘ value=‘中文‘></input>
<div class=‘hack‘ style="width:100px;
 height:100px;"></div>
<div id="1" style="padding:5px;position:relative;background-color:green;margin:10px;border:20px solid red;width:100%;height:200px;">
</div>
<div id="2"></div>
<span>SPAN</span>
</body>
</html>

b.html内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
</head>
<body>
<span>SPAN</span>
</body>
</html>

网上有传,如下写法可降低内存泄露:

 var frameDom = $(‘iframe:eq(0)‘)[0];
 var frameWin = frameDom.contentWindow;

 try{ 
      frameWin.document.write(‘‘); 
      frameWin.document.clear(); 
 }catch(e){}; 
 frameDom.src = ‘b.html‘;

那么效果怎样呢?

写法一:直接设置URL

var flag = true;
 var frameDom = $(‘iframe:eq(0)‘)[0];
 $(‘button‘).on(‘click‘,function(){
  if(flag){
   var frameDom = $(‘iframe:eq(0)‘)[0];
   var frameWin = frameDom.contentWindow;
   /*
   try{ 
    frameWin.document.write(‘‘); 
    frameWin.document.clear(); 
      }catch(e){}; 
      */
      frameDom.src = ‘b.html‘;
   flag = false;
  }else{
   var frameDom = $(‘iframe:eq(0)‘)[0];
   var frameWin = frameDom.contentWindow;
   /*
   try{ 
    frameWin.document.write(‘‘); 
    frameWin.document.clear(); 
      }catch(e){}; 
      */
      frameDom.src = ‘a.html‘;
   flag = true;
  }
  //$(‘#console‘).append(flag ? ‘切换到a.html‘:‘切换到b.html‘);
 });

使用sIEve测试:每切换一次,#leaks增加28左右。

写法二:按网传写法

<script>
 var flag = true;
 var frameDom = $(‘iframe:eq(0)‘)[0];
 $(‘button‘).on(‘click‘,function(){
  if(flag){
       var frameDom = $(‘iframe:eq(0)‘)[0];
       var frameWin = frameDom.contentWindow;
       try{ 
           frameWin.document.write(‘‘); 
           frameWin.document.clear(); 
       }catch(e){}; 
       frameDom.src = ‘b.html‘;
       flag = false;
  }else{
       var frameDom = $(‘iframe:eq(0)‘)[0];
       var frameWin = frameDom.contentWindow;
       try{ 
          frameWin.document.write(‘‘); 
          frameWin.document.clear(); 
       }catch(e){}; 
       frameDom.src = ‘a.html‘;
       flag = true;
  }
  //$(‘#console‘).append(flag ? ‘切换到a.html‘:‘切换到b.html‘);
 });
</script>

使用sIEve测试:每切换一次,#leaks增加28左右。与写法一并没有什么差别

写法三:

var flag = true;
 var frameDom = $(‘iframe:eq(0)‘)[0];
 $(‘button‘).on(‘click‘,function(){
  if(flag){
   /*
   try{ 
    frameDom.contentWindow.document.write(‘‘); 
    frameDom.contentWindow.document.clear(); 
    frameDom.contentWindow.close(); 
      }catch(e){};
      */
      $(‘iframe:eq(0)‘).remove();
      $(‘body‘).append("<iframe src=‘b.html‘></iframe>");
   flag = false;
  }else{
   /*
   try{ 
    frameDom.contentWindow.document.write(‘‘); 
    frameDom.contentWindow.document.clear(); 
    frameDom.contentWindow.close(); 
      }catch(e){};
      */
      $(‘iframe:eq(0)‘).remove();
      $(‘body‘).append("<iframe src=‘a.html‘></iframe>");
   flag = true;
  }
 });

使用sIEve测试:#leaks平均为 3,与前两种相差巨大

写法四:注意到,写法三中注释了一段代码,去掉注释会怎样?

var flag = true;
 var frameDom = $(‘iframe:eq(0)‘)[0];
 $(‘button‘).on(‘click‘,function(){
  if(flag){
   
   try{ 
    frameDom.contentWindow.document.write(‘‘); 
    frameDom.contentWindow.document.clear(); 
    frameDom.contentWindow.close(); 
      }catch(e){};
      
      $(‘iframe:eq(0)‘).remove();
      $(‘body‘).append("<iframe src=‘b.html‘></iframe>");
   flag = false;
  }else{
   
   try{ 
    frameDom.contentWindow.document.write(‘‘); 
    frameDom.contentWindow.document.clear(); 
    frameDom.contentWindow.close(); 
      }catch(e){};
      
      $(‘iframe:eq(0)‘).remove();
      $(‘body‘).append("<iframe src=‘a.html‘></iframe>");
   flag = true;
  }
 });

此写法与写法3并没有明显差别,每次切换#leaks仍然增加3左右

因此可以得出结论,最好的解决重置iframe地址内存泄露办法就是 把它干掉,再添加一个!

网传不一定靠谱啊

注:本机测试环境为 WIN7 x64 IE9

时间: 2024-10-12 15:24:39

IE下使用jQuery重置iframe地址时内存泄露问题解决办法的相关文章

Eclipse安装以及安装时遇到的问题解决办法

1, 首先要安装JDK(最好使用最新版本),注意区分32位于64位 2, 安装程序,双击打开安装即可 3, 安装包下载:http://developer.android.com/sdk/index.html#download 点击[Download the SDK],进到下载页 选择32位或64位,下载即可 4, 下载完成后,进入对应的文件夹,点击Eclipse的启动程序 5, 安装时出现如下对话框,就要设置java环境:没有提示直接下一步即可 6, 设置java环境变量.计算机,点右键,选择属

jQuery里ajax方法的内存泄露

今天修改别人代码,发现在chrome下完全正常,但是在IE下直接卡死,提示内存不足.为了解决问题,我就要先定位问题.根据错误提示也看不出来到底哪一步除了问题,只要靠猜了.大规模杀伤武器:疯狂注释,很快就发现了卡死是由于jQuery里的一个ajax请求引发的,针对这个ajax继续注释替换,很快发现问题是请求参数里一个值为dom对象..IE比较直性情遇到不合适的就直接撂挑子. 提醒自己,遇见问题,首先要相信自己,相信根据自己的聪明才智是可以解决的,不要急着去网上搜索,按图索骥,一步步走下去就ok了.

canvas中的getContext(&quot;2d&quot;)方法在jQuery中的使用中遇到的小问题解决办法

最近在学习HTML5的canvas,在练习过程中我突发奇想,既然原生的js可以完成画图,那么使用jQuery是否一样可以完成画图呢?然后我就开始动手进行试验,但是 var cxt=$("#clock").getContext("2d"); 这一行代码并没有发挥作用,然后我就逛了查阅了一些资料并且逛了一些博客论坛,最终解决了这个问题.只需要改成下面这个样子就好了: var cxt=$("#clock").get(0).getContext(&quo

centos6.5 桌面环境下使用命令行对不支持中文的问题解决办法

这篇文章是在windows 7安装的VMware 虚拟机 虚拟了一个Centos 6.5,虚拟系统的firefox上cnblogs写下的. 新安装的centos6.5系统,X window命令行终端查看文件总是有乱码,在网上看了很多东西,包括更改i18n等文件,以及重新安装中文字体支持等,都没有解决. 最后的解决办法是很简单的: 命令行终端顶部有个Terminal  --> set character encoding 添加GB18030的支持就ok了 www.tongpao.cn

python读写csv时中文乱码问题解决办法

参考1 参考2 CSV是英文Comma Separate Values(逗号分隔值)的缩写,顾名思义,文档的内容是由 "," 分隔的一列列的数据构成的,可以使用excel和文本编辑器等打开.CSV文档是一种编辑方便,可视化效果极佳的数据存储方式 1.python读写.追加csv方法: 'r':只读(缺省.如果文件不存在,则抛出错误) 'w':只写(如果文件不存在,则自动创建文件) 'a':附加到文件末尾(如果文件不存在,则自动创建文件) 'r+':读写(如果文件不存在,则抛出错误) 1

jquery uploadify 进入页面请求两次问题解决办法。

this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url) 改为 this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);this.setti

使用B或BL跳转时,下一条指令的地址是这样计算的

B跳转指令:它是个相对跳转指令,其机器码格式如下: [31:28]位是条件码:[27:24]位为“1010”(0xeaffffff)时,表示B跳转指令,为“1011”时,表示BL跳转指令:[23:0]表示偏移地址. 使用B或BL跳转时,下一条指令的地址是这样计算的: 将指令中24位带符号的补码立即数扩展为32(扩展其符号位):将此32位数左移两位:将得到的值加到pc寄存器中,即得到跳转的目标地址. 例程: 1.text 2.global   _start 3_start: 4         b

chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com/q/63123/ 问题出现的环境: 1:两个domain相同端口号不同的域名. 2:MVC4.0框架 3:从一个域名下用  jQuery.load("另一个域名下的页面"): 4:响应失败 : 响应状态status为(canceled) 请问这是什么情况呢 ?  我在IE下就没问题,可以

使用jquery获取iframe内的元素属性

当需要获取iframe里的内容时需要有几个前提,否则你是获取不到的: 1:当前页面与iframe的src的页面需要在同一个域名下: 2:必须要等iframe里边的页面加载完成才能获取,否则你要获取的标签就是不存在: 当这两个条件都满足的时候你就可以获取了(以下例子是本精灵通过jquery修改iframe(" iframe的ID名被取为了iframeName'")里页面的所有a标签的target属性值): function a_load(){ var isOnLoad = true; $