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

Web开发者必备的12款超赞jQuery插件

Dec 03 Javascript

js的Prototype属性解释及常用方法

May 08 Javascript

javascript实现多级联动下拉菜单的方法

Feb 06 Javascript

JavaScript代码实现左右上下自动晃动自动移动

Apr 08 Javascript

js友好的时间返回函数

Aug 24 Javascript

详解Javascript百度地图接口开发文档中的类和方法

Feb 07 Javascript

JavaScript多线程运行库Nexus.js详解

Dec 22 Javascript

webuploader实现上传图片到服务器功能

Aug 16 Javascript

vue.js购物车添加商品组件的方法

Sep 17 Javascript

layui的select联动实现代码

Sep 28 Javascript

js 计数排序的实现示例(升级版)

Jan 12 Javascript

如何封装Vue Element的table表格组件

Feb 06 Vue.js

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

求职信(1029) Delphi面试题(13) 推荐信(292) J2EE面试题(19) 自我评价(886) SOA面试题(9) 自荐信(981) 自我鉴定(671) Servlet面试题(20) Ruby面试题(15)

You might like

PHP程序61条面向对象分析设计的经验小结

2008/11/12 PHP

php利用新浪接口查询ip获取地理位置示例

2014/01/20 PHP

PHP+Mysql树型结构（无限分类）数据库设计的2种方式实例

2014/07/15 PHP

php匹配字符中链接地址的方法

2014/12/22 PHP

php遍历删除整个目录及文件的方法

2015/03/13 PHP

ExtJs中简单的登录界面制作方法

2010/08/19 Javascript

js导航菜单(自写)简单大方

2013/03/28 Javascript

ComboBox 和 DateField 在IE下消失的解决方法

2013/08/30 Javascript

IE下支持文本框和密码框placeholder效果的JQuery插件分享

2015/01/31 Javascript

使用RequireJS优化JavaScript引用代码的方法

2015/07/01 Javascript

比较常见的javascript中定义函数的区别

2015/11/09 Javascript

js编写贪吃蛇的小游戏

2020/08/24 Javascript

用js动态添加html元素,以及属性的简单实例

2016/07/19 Javascript

读Javascript高性能编程重点笔记

2016/12/21 Javascript

纯js实现动态时间显示

2020/09/07 Javascript

JS实现页面内跳转的简单代码

2017/09/03 Javascript

JavaSctit 利用FileReader和滤镜上传图片预览功能

2017/09/05 Javascript

vue中改变选中当前项的显示隐藏或者状态的实现方法

2018/02/08 Javascript

深入分析element ScrollBar滚动组件源码

2019/01/22 Javascript

JS实现图片幻灯片效果代码实例

2020/05/21 Javascript

Python中列表(list)操作方法汇总

2014/08/18 Python

Python的Bottle框架中返回静态文件和JSON对象的方法

2015/04/30 Python

Python合并字符串的3种方法

2015/05/21 Python

Python的网络编程库Gevent的安装及使用技巧

2016/06/24 Python

python 调用HBase的简单实例

2016/12/18 Python

python3下实现搜狗AI API的代码示例

2018/04/10 Python

QML使用Python的函数过程解析

2019/09/26 Python

python如何通过pyqt5实现进度条

2020/01/20 Python

python 链接sqlserver 写接口实例

2020/03/11 Python

python中doctest库实例用法

2020/12/31 Python

Ibatis的核心配置文件都有什么

2014/09/08 面试题

《广玉兰》教学反思

2014/04/14 职场文书

广告学专业求职信

2014/06/19 职场文书

大学辅导员述职报告

2015/01/10 职场文书

担保公司2015年终工作总结

2015/10/14 职场文书

2016新年晚会开场白

2015/12/03 职场文书