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

jquery 指南/入门基础

Nov 30 Javascript

用jQuery打造TabPanel效果代码

May 22 Javascript

JS、CSS加载中的小问题探讨

Nov 26 Javascript

JavaScript 匿名函数和闭包介绍

Apr 13 Javascript

原生js实现百叶窗效果及原理介绍

Apr 12 Javascript

BootStrap使用file-input插件上传图片的方法

Sep 05 Javascript

JS实现类似51job上的地区选择效果示例

Nov 17 Javascript

简单的vue-resourse获取json并应用到模板示例

Feb 10 Javascript

vue获取dom元素注意事项

Dec 28 Javascript

layui加载数据显示loading加载完成loading消失的实例代码

Sep 23 Javascript

在weex中愉快的使用scss的方法步骤

Jan 02 Javascript

vue配置型表格基于el-table拓展之table-plus组件

Apr 12 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

csv(4) 进销存(1) enumerate(1) IOC(3) Bean(3) find(1) 自动化(1) metaclass(1) zip(1) list(1)

You might like

php魔术变量用法实例详解

2014/11/13 PHP

学习php设计模式 php实现原型模式(prototype)

2015/12/07 PHP

PHP数组内存利用率低和弱类型详细解读

2017/08/10 PHP

PHP简单实现解析xml为数组的方法

2018/05/02 PHP

laravel框架语言包拓展实现方法分析

2019/11/22 PHP

PHP 出现 http500 错误的解决方法

2021/03/09 PHP

基于jquery点击自以外任意处，关闭自身的代码

2012/02/10 Javascript

js 动态加载事件的几种方法总结

2013/12/25 Javascript

javascript函数作用域学习示例(js作用域)

2014/01/13 Javascript

jquery.hotkeys监听键盘按下事件keydown插件

2014/05/11 Javascript

JavaScript中扩展Array contains方法实例

2020/08/23 Javascript

JavaScript通过join函数连接数组里所有元素的方法

2015/03/20 Javascript

干货!教大家如何选择Vue和React

2017/03/13 Javascript

微信小程序制作表格的方法

2019/02/14 Javascript

浅谈Webpack多页应用HMR卡住问题

2019/04/24 Javascript

vue设置默认首页的操作

2020/08/12 Javascript

JS如何操作DOM基于表格动态展示数据

2020/10/15 Javascript

详解python 拆包可迭代数据如tuple, list

2017/12/29 Python

python打造爬虫代理池过程解析

2019/08/15 Python

PyQt5+Pycharm安装和配置图文教程详解

2020/03/24 Python

opencv中图像叠加/图像融合/按位操作的实现

2020/04/01 Python

Python基于requests实现模拟上传文件

2020/04/21 Python

Python select及selectors模块概念用法详解

2020/06/22 Python

美国受欢迎的女性牛仔裤品牌：DL1961

2016/11/12 全球购物

贝玲妃英国官网：Benefit英国

2018/02/03 全球购物

JBL加拿大官方商店：扬声器、耳机等

2020/10/23 全球购物

英国奢侈品在线精品店：Hervia

2020/09/03 全球购物

业务主管岗位职责

2013/11/20 职场文书

新领导上任欢迎词

2014/01/13 职场文书

年终晚会活动方案

2014/08/21 职场文书

2014年政风行风工作总结

2014/11/22 职场文书

2014年扫黄打非工作总结

2014/12/03 职场文书

幼师小班个人总结

2015/02/12 职场文书

2015年乡镇纪检工作总结

2015/04/22 职场文书

2015初中生物教研组工作总结

2015/07/21 职场文书

导游词之黄帝陵景区

2019/09/16 职场文书