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

解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

Jan 11 Javascript

js 获取和设置css3 属性值的实现方法

May 06 Javascript

AngularJs 60分钟入门基础教程

Apr 03 Javascript

完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题

Dec 08 Javascript

js封装tab标签页实例分享

Dec 19 Javascript

Ajax异步获取html数据中包含js方法无效的解决方法

Feb 20 Javascript

Angular入口组件（entry component）与声明式组件的区别详解

Apr 09 Javascript

详解基于webpack&gettext的前端多语言方案

Jan 29 Javascript

使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

Jul 25 Javascript

JS 获取文件后缀，判断文件类型(比如是否为图片格式)

May 09 Javascript

微信小程序实现转盘抽奖

Sep 21 Javascript

JS中锚点链接点击平滑滚动并自由调整到顶部位置

Feb 06 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

低放电路(1) BCL3000(2) RP2100(1) ICF-SW07(1) PL550(1) H-501(1) 乐信(1) PL450(1) ICF-SW7600(1) PL990(2)

You might like

论坛头像随机变换代码

2006/10/09 PHP

php 清除网页病毒的方法

2008/12/05 PHP

PHP 中文处理技巧

2010/04/25 PHP

php获取从百度搜索进入网站的关键词的详细代码

2014/01/08 PHP

修改destoon会员公司的伪静态中的com目录的方法

2014/08/21 PHP

浅谈ThinkPHP的URL重写

2014/11/25 PHP

Symfony2安装的方法(2种方法)

2016/02/04 PHP

PHP数据库操作Helper类完整实例

2016/05/11 PHP

XP折叠菜单&仿QQ2006菜单

2006/12/16 Javascript

HTML长文本截取含有HTML代码同样适用的两种方法

2013/07/31 Javascript

键盘KeyCode值列表汇总

2013/11/26 Javascript

JS仿iGoogle自定义首页模块拖拽特效的方法

2015/02/13 Javascript

深入浅析同源策略和跨域访问

2015/11/26 Javascript

微信公众号支付H5调用支付解析

2016/11/04 Javascript

微信小程序技巧之show内容展示，上传文件编码问题

2017/01/23 Javascript

JavaScript实现移动小精灵的案例代码

2020/12/12 Javascript

解决Python出现_warn_unsafe_extraction问题的方法

2016/03/24 Python

python之django母板页面的使用

2018/07/03 Python

Python进阶之@property动态属性的实现

2019/04/01 Python

pyqt5与matplotlib的完美结合实例

2019/06/21 Python

anaconda如何查看并管理python环境

2019/07/05 Python

Python3环境安装Scrapy爬虫框架过程及常见错误

2019/07/12 Python

python删除文件夹下相同文件和无法打开的图片

2019/07/16 Python

详解Python并发编程之创建多线程的几种方法

2019/08/23 Python

详解Python中的路径问题

2020/09/02 Python

CSS3 实现图形下落动画效果

2020/11/13 HTML / CSS

网页美工求职信

2014/02/15 职场文书

法律专业自荐信

2014/06/03 职场文书

公司董事长助理工作职责

2014/07/12 职场文书

讲文明懂礼貌演讲稿

2014/09/11 职场文书

无财产无子女离婚协议书范文

2014/09/14 职场文书

慰问信范文

2015/02/14 职场文书

交通事故调解协议书

2015/05/20 职场文书

MySQL之PXC集群搭建的方法步骤

2021/05/25 MySQL

java如何实现获取客户端ip地址的示例代码

2022/04/07 Java/Android

Spring IOC容器Bean的作用域及生命周期实例

2022/05/30 Java/Android