编程 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 读后台cookie代码

Sep 15 Javascript

jquery中常用的SET和GET

Jan 13 Javascript

轻量级的原生js日历插件calendar.js使用指南

Apr 28 Javascript

javascript 中的 delete及delete运算符

Nov 15 Javascript

判断js的Array和Object的实现方法

Aug 29 Javascript

AngularJS递归指令实现Tree View效果示例

Nov 07 Javascript

vue2.0 实现页面导航提示引导的方法

Mar 13 Javascript

Node.js对MongoDB进行增删改查操作的实例代码

Apr 18 Javascript

layui的表单提交以及验证和修改弹框的实例

Sep 09 Javascript

Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

Apr 27 Javascript

基于JavaScript实现简单的轮播图

Mar 03 Javascript

GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析

Jun 15 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

Scheduled(1) 接口(1) 扫雷(1) 抽象类(1) router(1) 模拟登录(1) 单向链表(1) Date(1) 路由(1) 乱码(3)

You might like

当年上海收录机产品生产,进口和价格情况

2021/03/04 无线电

PHP删除数组中的特定元素的代码

2012/06/28 PHP

PHP防盗链代码实例

2014/08/27 PHP

thinkphp模板输出技巧汇总

2014/11/24 PHP

PHP数组实际占用内存大小原理解析

2020/12/11 PHP

JavaScript DOM学习第六章表单实例

2010/02/19 Javascript

jquery入门—访问DOM对象方法

2013/01/07 Javascript

jquery二级导航内容均分的原理及实现

2013/08/13 Javascript

JavaScript中ES6 Babel正确安装过程

2016/07/18 Javascript

AngularJS入门教程之控制器详解

2016/07/27 Javascript

AngularJS基础 ng-keyup 指令简单示例

2016/08/02 Javascript

ES6新特征数字、数组、字符串

2016/10/01 Javascript

SelecT下拉框选中和取值的解决方法

2016/11/22 Javascript

详解node.js搭建代理服务器请求数据

2017/04/08 Javascript

js实现关闭网页出现是否离开提示

2017/12/07 Javascript

JavaScript将数组转换为链表的方法

2020/02/16 Javascript

vue 授权获取微信openId操作

2020/11/13 Javascript

[02:11]2016国际邀请赛中国区预选赛全程回顾

2016/07/01 DOTA

Python Tkinter GUI编程入门介绍

2015/03/10 Python

Python函数式编程指南（二）：从函数开始

2015/06/24 Python

Python数据库的连接实现方法与注意事项

2016/02/27 Python

Python中在脚本中引用其他文件函数的实现方法

2016/06/23 Python

Python批处理删除和重命名文件夹的实例

2018/07/11 Python

使用python实现ftp的文件读写方法

2019/07/02 Python

浅谈Python 敏感词过滤的实现

2019/08/15 Python

tensorflow实现训练变量checkpoint的保存与读取

2020/02/10 Python

HTML5中使用json对象的实例代码

2018/09/10 HTML / CSS

Monnier Frères美国官网：法国知名奢侈品网站

2016/11/22 全球购物

材料成型专业个人求职信范文

2013/09/25 职场文书

团支书的期末学习总结自我评价

2013/11/01 职场文书

计算机应用专业应届毕业生中文求职信范文

2013/11/29 职场文书

材料物理专业求职信

2014/09/01 职场文书

婚礼新人答谢词

2015/01/04 职场文书

MySQL Router的安装部署

2021/04/24 MySQL

python字符串常规操作大全

2021/05/02 Python

Pytest中conftest.py的用法

2021/06/27 Python