编程 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 相关文章推荐

javascript日期对象格式化为字符串的实现方法

Jan 14 Javascript

jQuery中unbind()方法用法实例

Jan 19 Javascript

JavaScript实现为input与textarea自定义hover,focus效果的方法

Aug 21 Javascript

jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

Jan 21 Javascript

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

Nov 25 Javascript

使用jQuery卸载全部事件的思路详解

Apr 03 jQuery

knockoutjs模板实现树形结构列表

Jul 31 Javascript

bootstrap模态框弹出和隐藏,动态改变中间内容的实例

Aug 10 Javascript

Vue 进阶之路（三）

Apr 18 Javascript

JS匿名函数内部this指向问题详析

May 10 Javascript

如何实现双向绑定mvvm的原理实现

May 28 Javascript

原生js实现分页效果

Sep 23 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

城市猎人(1) 申请书(21) HAM-2000(1) 观后感(479) 文书(291) 实用文书(952) AngularJS(2) 通知(159) 西索(1) 波段(1)

You might like

PHP 程序授权验证开发思路

2009/07/09 PHP

Godaddy空间Zend Optimizer升级方法

2010/05/10 PHP

vs中通过剪切板循环来循环粘贴不同内容

2011/04/30 PHP

PHP实现发送邮件的方法(基于简单邮件发送类)

2015/12/17 PHP

tp5框架前台无限极导航菜单类实现方法分析

2020/03/29 PHP

jquery 查找新建元素代码

2010/07/06 Javascript

新手常遇到的一些jquery问题整理

2010/08/16 Javascript

jquery map方法使用示例

2014/04/23 Javascript

jQuery 1.9移除了$.browser可以使用$.support来替代

2014/09/03 Javascript

jQuery使用addClass()方法给元素添加多个class样式

2015/03/26 Javascript

深入浅析JavaScript中对事件的三种监听方式

2015/09/29 Javascript

基于JS代码实现图片在页面中旋转效果

2016/06/16 Javascript

web前端开发upload上传头像js示例代码

2016/10/22 Javascript

Angular中使用$watch监听object属性值的变化(详解)

2017/04/24 Javascript

js获取浏览器的各种属性

2017/04/27 Javascript

在Vue项目中取消ESLint代码检测的步骤讲解

2019/01/27 Javascript

详解node和ES6的模块导出与导入

2020/02/19 Javascript

[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况

2014/07/14 DOTA

[02:28]DOTA2亚洲邀请赛 LGD战队巡礼

2015/02/03 DOTA

用Python编写一个简单的俄罗斯方块游戏的教程

2015/04/03 Python

在Python中使用模块的教程

2015/04/27 Python

一个基于flask的web应用诞生记录用户账户登录状态（6）

2017/04/11 Python

完美解决Pycharm无法导入包的问题 Unresolved reference

2018/05/18 Python

Flask入门之上传文件到服务器的方法示例

2018/07/18 Python

Python 微信之获取好友昵称并制作wordcloud的实例

2019/02/21 Python

Python使用pyserial进行串口通信的实例

2019/07/02 Python

Python实现网页截图（PyQT5）过程解析

2019/08/12 Python

tensorflow生成多个tfrecord文件实例

2020/02/17 Python

python爬虫容易学吗

2020/06/02 Python

我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么问题？char *p; *p = malloc(10);

2016/10/06 面试题

上海雨人软件技术开发有限公司测试题

2015/07/14 面试题

培训心得体会

2013/12/29 职场文书

秋季运动会通讯稿

2014/01/24 职场文书

办公室文员岗位职责范本

2014/06/12 职场文书

国庆促销活动总结

2014/08/29 职场文书

Django cookie和session的应用场景及如何使用

2021/04/29 Python