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

Jquery AutoComplete自动完成的使用方法实例

Mar 19 Javascript

jquery中$.post()方法的简单实例

Feb 04 Javascript

JavaScript Math.floor方法(对数值向下取整)

Jan 09 Javascript

不想让浏览器运行javascript脚本的方法

Nov 20 Javascript

React.js入门实例教程之创建hello world 的5种方式

May 11 Javascript

JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

Dec 23 Javascript

jQuery实现贪吃蛇小游戏（附源码下载）

Mar 04 Javascript

Bootstrap多级菜单的实现代码

May 23 Javascript

使用vue与jquery实时监听用户输入状态的操作代码

Sep 19 jQuery

让网站自动生成章节目录索引的多个js代码

Jan 07 Javascript

JS/HTML5游戏常用算法之追踪算法实例详解

Dec 12 Javascript

使用JS判断页面是首次被加载还是刷新

May 26 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

表约束(2) 百度地图(1) PyAutoGUI(1) Master(1) 主从复制(1) 封装(1) variables(1) Slave(1) transaction(1) gRPC(3)

You might like

水质对咖图啡风味的影响具体有哪些

2021/03/03 冲泡冲煮

php从数组中随机选择若干不重复元素的方法

2015/03/14 PHP

php多重接口的实现方法

2015/06/20 PHP

php注册登录系统简化版

2020/12/28 PHP

PHP实现对图片的反色处理功能【测试可用】

2018/02/01 PHP

从JavaScript 到 JQuery (1)学习小结

2009/02/12 Javascript

javascript 限制输入脚本大全

2009/11/03 Javascript

深入理解JavaScript系列（14）作用域链介绍(Scope Chain)

2012/04/12 Javascript

JQUERY对单选框(radio)操作的小例子

2013/04/25 Javascript

JavaScript中的索引数组、关联数组和静态数组、动态数组讲解

2014/11/08 Javascript

jQuery实现hover合成事件的方法

2015/08/06 Javascript

js文本框输入内容智能提示效果

2015/12/02 Javascript

Knockout自定义绑定创建方法

2015/12/26 Javascript

JavaScript对象参数的引用传递

2016/01/14 Javascript

js获取新浪天气接口的实现代码

2016/06/06 Javascript

jQuery如何防止Ajax重复提交

2016/10/14 Javascript

JavaScript用JSONP跨域请求数据实例详解

2017/01/06 Javascript

通过学习bootstrop导航条学会修改bootstrop颜色基调

2017/06/11 Javascript

vue2.0 自定义饼状图 (Echarts)组件的方法

2018/03/02 Javascript

element-ui的回调函数Events的用法详解

2018/10/16 Javascript

ES6箭头函数和扩展实例分析

2020/05/23 Javascript

[53:15]2018DOTA2亚洲邀请赛3月29日小组赛A组 LGD VS TNC

2018/03/30 DOTA

python实现12306抢票及自动邮件发送提醒付款功能

2018/03/08 Python

django处理select下拉表单实例(从model到前端到post到form)

2020/03/13 Python

python中rc1什么意思

2020/06/19 Python

浅谈Python中的生成器和迭代器

2020/06/19 Python

全面介绍python中很常用的单元测试框架unitest

2020/12/14 Python

GIVENCHY纪梵希官方旗舰店：高定彩妆与贵族护肤品

2018/04/16 全球购物

法学专业本科生自荐信范文

2013/12/17 职场文书

给女儿的表扬信

2014/01/18 职场文书

会计专业大学生求职信范文

2014/01/28 职场文书

领导班子四风表现材料

2014/08/23 职场文书

2015年乡镇党务公开工作总结

2015/05/19 职场文书

2015年妇幼卫生工作总结

2015/05/23 职场文书

安全教育主题班会总结

2015/08/14 职场文书

pytorch 梯度NAN异常值的解决方案

2021/06/05 Python