IE下使用jQuery重置iframe地址时内存泄露问题解决办法_jquery
程序员文章站
2022-05-06 18:14:22
...
页面中有个iframe:
Insert title here
SPAN
b.html内容如下:
Insert title here
SPAN
var frameDom = $('iframe:eq(0)')[0];
var frameWin = frameDom.contentWindow;
try{
frameWin.document.write('');
frameWin.document.clear();
}catch(e){};
frameDom.src = 'b.html';
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');
});
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("");
flag = false;
}else{
/*
try{
frameDom.contentWindow.document.write('');
frameDom.contentWindow.document.clear();
frameDom.contentWindow.close();
}catch(e){};
*/
$('iframe:eq(0)').remove();
$('body').append("");
flag = true;
}
});
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("");
flag = false;
}else{
try{
frameDom.contentWindow.document.write('');
frameDom.contentWindow.document.clear();
frameDom.contentWindow.close();
}catch(e){};
$('iframe:eq(0)').remove();
$('body').append("");
flag = true;
}
});
复制代码 代码如下:
其中a.html内容如下:
复制代码 代码如下:
后缀"\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有效
复制代码 代码如下:
SPAN
b.html内容如下:
复制代码 代码如下:
SPAN
网上有传,如下写法可降低内存泄露:
复制代码 代码如下:
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左右。
写法二:按网传写法
复制代码 代码如下:
使用sIEve测试:每切换一次,#leaks增加28左右。与写法一并没有什么差别
写法三:
复制代码 代码如下:
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("");
flag = false;
}else{
/*
try{
frameDom.contentWindow.document.write('');
frameDom.contentWindow.document.clear();
frameDom.contentWindow.close();
}catch(e){};
*/
$('iframe:eq(0)').remove();
$('body').append("");
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("");
flag = false;
}else{
try{
frameDom.contentWindow.document.write('');
frameDom.contentWindow.document.clear();
frameDom.contentWindow.close();
}catch(e){};
$('iframe:eq(0)').remove();
$('body').append("");
flag = true;
}
});
此写法与写法3并没有明显差别,每次切换#leaks仍然增加3左右
因此可以得出结论,最好的解决重置iframe地址内存泄露办法就是 把它干掉,再添加一个!
网传不一定靠谱啊
注:本机测试环境为 WIN7 x64 IE9