编程 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 Select操作大集合

May 26 Javascript

javascript代码加载优化方法

Jan 30 Javascript

javascript动态加载实现方法一

Aug 22 Javascript

js取整数、取余数的方法

May 11 Javascript

jQuery解析XML 详解及方法总结

Sep 28 Javascript

微信小程序二维码canvas绘制实例详解

Jan 06 Javascript

JavaScript使用readAsDataURL读取图像文件

May 10 Javascript

用Webpack构建Vue项目的实践

Nov 07 Javascript

JS在if中的强制类型转换方式

Jul 15 Javascript

解决Js先触发失去焦点事件再执行点击事件的问题

Aug 30 Javascript

vue踩坑记-在项目中安装依赖模块npm install报错

Apr 02 Javascript

Vue实现附件上传功能

May 28 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) T-SQL(1) GTID(1) ip连接(1) 临时表(1) 表变量(1) Logrotate(1) 批处理(1) 重复数据(2) timestamp(1)

You might like

php cookies中删除的一般赋值方法

2011/05/07 PHP

JS中encodeURIComponent函数用php解码的代码

2012/03/01 PHP

php 算法之实现相对路径的实例

2017/10/17 PHP

通过PHP实现获取访问用户IP

2020/05/09 PHP

PHP+Mysql分布式事务与解决方案深入理解

2021/02/27 PHP

javascript 面向对象编程基础多态

2009/08/21 Javascript

javascript复制对象使用说明

2011/06/28 Javascript

一个js导致的jquery失效问题的解决方法

2013/11/27 Javascript

JS不间断向上滚动效果代码

2013/12/25 Javascript

Node.js中使用计时器定时执行函数详解

2014/08/15 Javascript

JavaScript中的继承之类继承

2016/05/01 Javascript

JS遍历对象属性的方法示例

2017/01/10 Javascript

vue2.0 中使用transition实现动画效果使用心得

2018/08/13 Javascript

Vux+Axios拦截器增加loading的问题及实现方法

2018/11/08 Javascript

jQuery实现雪花飘落效果

2020/08/02 jQuery

使用Typescript开发微信小程序的步骤详解

2021/01/12 Javascript

[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访

2014/06/30 DOTA

Python中强大的命令行库click入门教程

2016/12/26 Python

AI人工智能 Python实现人机对话

2017/11/13 Python

python实现excel读写数据

2021/03/02 Python

详解基于django实现的webssh简单例子

2018/07/17 Python

基于python3实现socket文件传输和校验

2018/07/28 Python

django使用xadmin的全局配置详解

2019/11/15 Python

python是怎么被发明的

2020/06/15 Python

Ralph Lauren法国官网：美国高品味时装品牌

2017/12/08 全球购物

TUMI马来西亚官方网站：国际领先的高品质商旅箱包品牌

2018/04/26 全球购物

决心书标准格式

2014/03/11 职场文书

学术会议主持词

2014/03/17 职场文书

大学迎新标语

2014/06/26 职场文书

食品委托检验协议书范本

2014/09/12 职场文书

单位作风建设自查报告

2014/10/23 职场文书

2014预防青少年违法犯罪工作总结

2014/12/10 职场文书

python用字节处理文件实例讲解

2021/04/13 Python

python 提取html文本的方法

2021/05/20 Python

如何使用Python提取Chrome浏览器保存的密码

2021/06/09 Python

Python 的 sum() Pythonic 的求和方法详细

2021/10/16 Python