编程 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 模拟JQuery的Ready方法实现并出现的问题

Dec 06 Javascript

使用Javascript接收get传递的值的代码

Nov 30 Javascript

JQuery判断radio是否选中并获取选中值的示例代码

Oct 17 Javascript

JavaScript让Textarea支持tab按键的方法

Jun 26 Javascript

JS基于VML技术实现的五角星礼花效果代码

Oct 26 Javascript

js图片轮播效果实现代码

Apr 18 Javascript

javascript数组克隆简单实现方法

Dec 16 Javascript

JS使用正则截取两个字符串之间的字符串实现方法详解

Jan 06 Javascript

详解如何在React组件“外”使用父组件的Props

Jan 12 Javascript

vue调试工具vue-devtools安装及使用方法

Nov 07 Javascript

详解关于webpack多入口热加载很慢的原因

Apr 24 Javascript

JS实现拖动模糊框特效

Aug 25 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

菲律宾购物网站(13) 捷克购物网站(26) 智利购物网站(5) 匈牙利购物网站(11) 北美洲购物网站(1) 巴基斯坦购物网站(2) 秘鲁购物网站(1) 新西兰购物网站(42) 卡塔尔购物网站(3) 沙特阿拉伯购物网站(9)

You might like

php使用wordwrap格式化文本段落的方法

2015/03/17 PHP

PHP使用curl函数发送Post请求的注意事项

2016/11/26 PHP

搜索附近的人PHP实现代码

2018/02/11 PHP

jquery 图片Silhouette Fadeins渐显效果

2010/02/07 Javascript

javascript返回顶部效果(自写代码)

2013/01/06 Javascript

AngularJS的一些基本样式初窥

2015/07/27 Javascript

Javascript实现可旋转的圆圈实例代码

2015/08/04 Javascript

jQuery实现的数值范围range2dslider选取插件特效多款代码分享

2015/08/27 Javascript

js实现兼容性好的微软官网导航下拉菜单效果

2015/09/07 Javascript

JS与jQuery遍历Table所有单元格内容的方法

2015/12/07 Javascript

JQuery EasyUI的使用

2016/02/24 Javascript

JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

2016/04/05 Javascript

js防阻塞加载的实现方法

2016/09/09 Javascript

JS制作类似选项卡切换的年历

2016/12/03 Javascript

浅析JS中常用类型转换及运算符表达式

2017/07/23 Javascript

详解VS Code使用之Vue工程配置format代码格式化

2019/03/20 Javascript

antd的select下拉框因为数据量太大造成卡顿的解决方式

2020/10/31 Javascript

[01:56]《DOTA2》中文配音CG

2013/04/22 DOTA

[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

Python文件夹与文件的操作实现代码

2014/07/13 Python

python得到一个excel的全部sheet标签值方法

2018/12/10 Python

详解从Django Rest Framework响应中删除空字段

2019/01/11 Python

python使用Paramiko模块实现远程文件拷贝

2019/04/30 Python

python openpyxl使用方法详解

2019/07/18 Python

Python 读取用户指令和格式化打印实现解析

2019/09/02 Python

详解python uiautomator2 watcher的使用方法

2019/09/09 Python

python实现根据文件格式分类

2019/10/31 Python

Python 列表推导式需要注意的地方

2020/10/23 Python

CSS中的字体大小设置属性总结

2016/05/24 HTML / CSS

巴西男士胡须和头发护理产品商店：Beard

2017/11/13 全球购物

Nike加拿大官网：Nike.com (CA)

2019/04/09 全球购物

葡萄牙航空官方网站：TAP Air Portugal

2019/10/31 全球购物

澳大利亚手袋、珠宝和在线时尚精品店：The Way

2019/12/21 全球购物

服务员岗位责任制

2014/02/11 职场文书

电大奖学金获奖感言

2014/08/14 职场文书

vue实现无缝轮播效果（跑马灯）

2021/05/14 Vue.js