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

利用JS进行图片的切换即特效展示图片

Dec 03 Javascript

原生javaScript做得动态表格(注释写的很清楚)

Dec 29 Javascript

Angularjs自定义指令实现三级联动选择地理位置

Feb 13 Javascript

vue 中自定义指令改变data中的值

Jun 02 Javascript

ajax+node+request爬取网络图片的实例(宅男福利)

Aug 28 Javascript

js禁止浏览器页面后退功能的实例(推荐)

Sep 01 Javascript

利用CDN加速react webpack打包后的文件详解

Feb 22 Javascript

Angular学习教程之RouterLink花式跳转

May 03 Javascript

微信小程序登录按钮遮罩浮层效果的实现方法

Dec 16 Javascript

微信小程序实现九宫格抽奖

Apr 15 Javascript

vue中添加与删除关键字搜索功能

Oct 12 Javascript

解决vue页面渲染但dom没渲染的操作

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

数据类型(8) metaclass(1) 自动化(1) Bean(3) Hash(1) IOC(3) 触发器(3) XML(1) zip(1) Geospatial(1)

You might like

php中require和require_once的区别说明

2014/02/27 PHP

利用PHP获取网站访客的所在地位置

2017/01/18 PHP

PHP实现登陆表单提交CSRF及验证码

2017/01/24 PHP

兼容主流浏览器的iframe自适应高度js脚本

2014/01/10 Javascript

JS实现黑客帝国文字下落效果

2015/09/01 Javascript

jQuery使用$.ajax进行即时验证的方法

2015/12/08 Javascript

Java遍历集合方法分析（实现原理、算法性能、适用场合）

2016/04/25 Javascript

JavaScript递归操作实例浅析

2016/10/31 Javascript

JS正则RegExp.test()使用注意事项(不具有重复性)

2016/12/28 Javascript

微信小程序对接七牛云存储的方法

2017/07/30 Javascript

javaScript canvas实现(画笔大小颜色橡皮的实例)

2017/11/28 Javascript

Vue.js 实现微信公众号菜单编辑器功能(一)

2018/05/08 Javascript

Vue-Router基础学习笔记(小结)

2018/10/15 Javascript

微信小程序dom操作的替代思路实例分析

2018/12/06 Javascript

JS document内容及样式操作完整示例

2020/01/14 Javascript

uni-app使用微信小程序云函数的步骤示例

2020/05/22 Javascript

python使用Image处理图片常用技巧分析

2015/06/01 Python

python3批量删除豆瓣分组下的好友的实现代码

2016/06/07 Python

python实现简单flappy bird

2018/12/24 Python

使用 Python 快速实现 HTTP 和 FTP 服务器的方法

2019/07/22 Python

CSS3实现时间轴特效

2020/11/02 HTML / CSS

迪梵英国官方网站：Darphin英国

2017/12/06 全球购物

法国床上用品商店：La Compagnie du lit

2019/12/26 全球购物

澳大利亚领先的男装零售连锁店：Lowes

2020/08/07 全球购物

servlet面试题

2012/08/20 面试题

会计求职信范文

2014/05/24 职场文书

爱祖国爱家乡演讲稿

2014/09/02 职场文书

2014向国旗敬礼网上签名活动总结

2014/09/27 职场文书

2014党支部对照检查材料思想汇报

2014/10/05 职场文书

美容院合作经营协议书

2014/10/10 职场文书

工作时间擅自离岗检讨书

2014/10/24 职场文书

销售员岗位职责范本

2015/04/11 职场文书

管理失职检讨书范文

2015/05/05 职场文书

联谊活动总结范文

2015/05/09 职场文书

医者仁心观后感

2015/06/17 职场文书

MySQL update set 和 and的区别

2021/05/08 MySQL