编程 Javascript

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

Posted in Javascript onFebruary 05, 2015

页面中有个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左右。

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

写法二：按网传写法

<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左右。与写法一并没有什么差别

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

写法三：

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,与前两种相差巨大

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

写法四：注意到，写法三中注释了一段代码，去掉注释会怎样？

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;

  }

 });

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

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

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

网传不一定靠谱啊

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS如何将UTC格式时间转本地格式

Sep 04 Javascript

js修改input的type属性问题探讨

Oct 12 Javascript

js构造函数、索引数组和属性的实现方式和使用

Nov 16 Javascript

jquery实现仿新浪微博评论滚动效果

Aug 06 Javascript

js在ie下打开对话窗口的方法小结

Oct 24 Javascript

浅谈关于angularJs中使用$.ajax的注意点

Aug 12 Javascript

Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）

May 16 Javascript

深入浅析js原型链和vue构造函数

Oct 25 Javascript

使用vue for时为什么要key【推荐】

Jul 11 Javascript

vue使用混入定义全局变量、函数、筛选器的实例代码

Jul 29 Javascript

JavaScript实现移动端弹窗后禁止滚动

May 25 Javascript

解决vue刷新页面以后丢失store的数据问题

Aug 11 Javascript

js关于命名空间的函数实例

Feb 05 #Javascript

js实现数字每三位加逗号的方法

Feb 05 #Javascript

javascript实现字符串反转的方法

Feb 05 #Javascript

Javascript中拼接大量字符串的方法

Feb 05 #Javascript

jquery操作select方法汇总

Feb 05 #Javascript

高性能JavaScript模板引擎实现原理详解

Feb 05 #Javascript

jquery操作复选框checkbox的方法汇总

Feb 05 #Javascript

SRF-S83(1) 森海(1) YB400(2) MX500(1) 南麂列岛(1) PL660(1) 直流胆(1) S2000(3) 台湾(1) YB235(1)

You might like

乱谈我对耳机、音箱的感受

2021/03/02 无线电

Discuz 6.0+ 批量注册用户名

2009/09/13 PHP

PHP网页游戏学习之Xnova(ogame)源码解读（十二）

2014/06/25 PHP

PHP中使用sleep函数实现定时任务实例分享

2014/08/21 PHP

php验证码实现代码（3种）

2015/09/07 PHP

使用PHPStorm+XDebug搭建单步调试环境

2017/11/19 PHP

用dom+xhtml+css制作的一个相册效果代码打包下载

2008/01/24 Javascript

jQuery技巧大放送学习jquery的朋友可以看下

2009/10/14 Javascript

JavaScript 高效运行代码分析

2010/03/18 Javascript

跟着Jquery API学Jquery之一选择器

2010/04/07 Javascript

禁用页面部分JavaScript不是全部而是部分

2014/09/03 Javascript

nodejs实现获取某宝商品分类

2015/05/28 NodeJs

jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击

2016/01/22 Javascript

iscroll.js的上拉下拉刷新时无法回弹的解决方法

2016/02/18 Javascript

浅谈jQuery中的eq()与DOM中element.[]的区别

2016/10/28 Javascript

angularJS 指令封装回到顶部示例详解

2017/01/22 Javascript

使用get方式提交表单在地址栏里面不显示提交信息

2017/02/21 Javascript

Vue函数式组件-你值得拥有

2019/05/09 Javascript

如何使用CSS3和JQuery easing 插件制作绚丽菜单

2019/06/18 jQuery

Vue组件模板及组件互相引用代码实例

2020/03/11 Javascript

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

2020/07/18 Javascript

[02:12]DOTA2英雄基础教程变体精灵

2013/12/16 DOTA

深度定制Python的Flask框架开发环境的一些技巧总结

2016/07/12 Python

python：socket传输大文件示例

2017/01/18 Python

Python3处理HTTP请求的实例

2018/05/10 Python

django如何通过类视图使用装饰器

2019/07/24 Python

keras获得model中某一层的某一个Tensor的输出维度教程

2020/01/24 Python

俄罗斯最大的隐形眼镜销售网站：Ochkov.Net

2021/02/07 全球购物

环境科学专业研究生求职信

2013/10/02 职场文书

篝火晚会主持词

2014/03/25 职场文书

詹天佑教学反思

2014/04/30 职场文书

爬山的活动方案

2014/08/16 职场文书

2014乡镇干部对照检查材料思想汇报

2014/09/26 职场文书

浅谈mysql执行过程以及顺序

2021/05/12 MySQL

python四种出行路线规划的实现

2021/06/23 Python

搭建Yolov5服务器

2022/04/30 Servers