IE下使用jQuery重置iframe地址時內存泄露問題解決辦法
頁面中有個iframe:
復制代碼 代碼如下:
iframe src=https://www.questions.com.cn/dnjc/’a.html’/iframe
button測試IFRAME泄露/button
其中a.html內容如下：
復制代碼 代碼如下:
!DOCTYPE html
html
head
meta charset="UTF-8"
titleInsert title here/title
script type="text/javascript" src="https://www.questions.com.cn/dnjc/jquery/jquery.min.js"/script
style
.hack{
/* 1.所有瀏覽器都有效 */
background-color:green;
/* 2.IE8~IE10,Opera有效,但是Opera兼容性可以不考慮 */
background-color:blue;
/* 3.IE9~IE10有效,與2組合，在2中先寫針對IE8的 ， 在此條中針對IE9|IE10 */
background-color:red9;
/* 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都生效
后綴"" IE8/IE9/IE10都生效，是IE8/9/10的hack
后綴"9" 只對IE9/IE10生效 ， 是IE9/10的hack
前綴"*" 對IE7有效
前綴" " 對IE7有效
選擇器前綴 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
針對IE10有效
復制代碼 代碼如下:
input type=’text’ value=https://www.questions.com.cn/dnjc/’中文’/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
spanSPAN/span
/body
/html
b.html內容如下：
復制代碼 代碼如下:
!DOCTYPE html
html
head
meta charset="UTF-8"
titleInsert title here/title
script type="text/javascript" src="https://www.questions.com.cn/dnjc/jquery/jquery.min.js"/script
/head
body
spanSPAN/span
/body
/html
網上有傳，如下寫法可降低內存泄露：
復制代碼 代碼如下:
var frameDom = $(’iframe:eq(0)’)[0];
var frameWin = frameDom.contentWindow;
try{
frameWin.document.write(’’);
frameWin.document.clear();
}catch(e){};
frameDom.src = https://www.questions.com.cn/dnjc/’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 = https://www.questions.com.cn/dnjc/’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 = https://www.questions.com.cn/dnjc/’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 = https://www.questions.com.cn/dnjc/’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 = https://www.questions.com.cn/dnjc/’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){
/*
try{
frameDom.contentWindow.document.write(’’);
frameDom.contentWindow.document.clear();
frameDom.contentWindow.close();
}catch(e){};
*/
$(’iframe:eq(0)’).remove();
$(’body’).append("iframe src=https://www.questions.com.cn/dnjc/’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=https://www.questions.com.cn/dnjc/’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=https://www.questions.com.cn/dnjc/’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=https://www.questions.com.cn/dnjc/’a.html’/iframe");
flag = true;
}
});
此寫法與寫法3并沒有明顯差別 ， 每次切換#leaks仍然增加3左右
因此可以得出結論，最好的解決重置iframe地址內存泄露辦法就是 把它干掉，再添加一個！
【IE下使用jQuery重置iframe地址時內存泄露問題解決辦法】網傳不一定靠譜啊
注：本機測試環境為 WIN7 x64 IE9
您可能感興趣的文章:jquery不會自動回收xmlHttpRequest對象 導致了內存溢出使用jQuery Ajax功能時需要注意的一個問題(內存溢出)JQuery1.4Ajax IE8 內存泄漏問題JQuery Dialog的內存泄露問題解決方法js內存泄露的幾種情況詳細探討Javascript 閉包引起的IE內存泄露分析容易造成JavaScript內存泄露幾個方面權威JavaScript 中的內存泄露模式關于js內存泄露的一個好例子jQuery內存泄露解決辦法
