IE下使用jQuery重置iframe地址时内存泄露问题解决办法

时间：2021-05-28

页面中有个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{

background-color:green;

background-color:blue\0;

background-color:red\9\0;

+background-color:yellow;
}

@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;

frameDom.src = 'b.html';
flag = false;
}else{
var frameDom = $('iframe:eq(0)')[0];
var frameWin = frameDom.contentWindow;

frameDom.src = 'a.html';
flag = true;
}
//$('#console').append(flag ? '切换到a.html':'切换到b.html');
});

使用sIEve测试：每切换一次，#leaks增加28左右。

写法二：按网传写法

复制代码 代码如下:
<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左右。与写法一并没有什么差别

写法三：

复制代码 代码如下:
var flag = true;
var frameDom = $('iframe:eq(0)')[0];
$('button').on('click',function(){
if(flag){

$('iframe:eq(0)').remove();
$('body').append("<iframe src='b.html'></iframe>");
flag = false;
}else{

$('iframe:eq(0)').remove();
$('body').append("<iframe src='a.html'></iframe>");
flag = true;
}
});

使用sIEve测试：#leaks平均为 3,与前两种相差巨大

写法四：注意到，写法三中注释了一段代码，去掉注释会怎样？

复制代码 代码如下:
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;
}
});

此写法与写法3并没有明显差别，每次切换#leaks仍然增加3左右

因此可以得出结论，最好的解决重置iframe地址内存泄露办法就是 把它干掉，再添加一个！

网传不一定靠谱啊

注：本机测试环境为 WIN7 x64 IE9

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章