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

cnblogs中在闪存中屏蔽某人的实现代码

Nov 14 Javascript

获取div编辑框，textarea，input text的光标位置兼容IE，FF和Chrome的方法介绍

Nov 08 Javascript

javascript数组输出的两种方式

Jan 13 Javascript

JS实现的最简Table选项卡效果

Oct 14 Javascript

JS封装通过className获取元素的函数示例

Dec 20 Javascript

详谈JavaScript的闭包及应用

Jan 17 Javascript

JS获取短信验证码倒计时的实现代码

May 22 Javascript

详解vue渲染函数render的使用

Dec 12 Javascript

解决vue axios的封装请求状态的错误提示问题

Sep 25 Javascript

JS异步执行结果获取的3种解决方式

Feb 19 Javascript

Javascript 类型转换、封闭函数及常见内置对象操作示例

Nov 15 Javascript

vue如何使用外部特殊字体的操作

Jul 30 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

D1835(1) L4X25T(1) 飞利浦(2) D1875(1) 德生PL330(2) PHILIPS(3) SANGEAN(1) 山进(2) ATS-909X(1) Grundig(1)

You might like

用header 发送cookie的php代码

2007/03/16 PHP

在yii中新增一个用户验证的方法详解

2013/06/20 PHP

从wamp到xampp的升级之路

2015/04/08 PHP

php轻松实现文件上传功能

2016/03/03 PHP

基于Laravel实现的用户动态模块开发

2017/09/21 PHP

php curl发送请求实例方法

2019/08/01 PHP

jquery调用asp.net 页面后台的实现代码

2011/04/27 Javascript

jQuery实现自动切换播放的经典滑动门效果

2015/09/12 Javascript

原生js封装二级城市下拉列表的实现代码

2016/06/16 Javascript

详解JavaScript跨域总结与解决办法

2016/10/31 Javascript

基本DOM节点操作

2017/01/17 Javascript

js实现百度登录框鼠标拖拽效果

2017/03/07 Javascript

Angular2学习教程之ng中变更检测问题详解

2017/05/28 Javascript

javascript+html5+css3自定义提示窗口

2017/06/21 Javascript

QRCode.js：基于JQuery的生成二维码JS库的使用

2017/06/23 jQuery

js使用html2canvas实现屏幕截取的示例代码

2017/08/28 Javascript

vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

2017/10/16 Javascript

基于 Vue 实现一个酷炫的 menu插件

2017/11/14 Javascript

Node解决简单重复问题系列之Excel内容的获取

2018/01/02 Javascript

关于vue里页面的缓存详解

2019/11/04 Javascript

微信内置开发 iOS修改键盘换行为搜索的解决方案

2019/11/06 Javascript

5个你不知道的JavaScript字符串处理库(小结)

2020/06/01 Javascript

Element Tooltip 文字提示的使用示例

2020/07/26 Javascript

JavaScript逻辑运算符相关总结

2020/09/04 Javascript

vue 在服务器端直接修改请求的接口地址

2020/12/19 Vue.js

python解析中国天气网的天气数据

2014/03/21 Python

Python中断言Assertion的一些改进方案

2016/10/27 Python

Windows下将Python文件打包成.EXE可执行文件的方法

2018/08/03 Python

python中通过selenium简单操作及元素定位知识点总结

2019/09/10 Python

Python 实现一个手机号码获取妹子名字的功能

2019/09/25 Python

机械设计制造专业个人求职信

2013/09/25 职场文书

说明书格式及范文

2014/05/07 职场文书

校车安全责任书

2014/08/25 职场文书

见义勇为事迹材料

2014/12/24 职场文书

2015年毕业生个人自荐书

2015/03/24 职场文书

停水通知

2015/04/16 职场文书