IE下使用jQuery重置iframe位址時記憶體外洩問題解決方案

IE下使用jQuery重置iframe位址時記憶體外洩問題解決方案_jquery

WBOY

發布： 2016-05-16 16:15:28

原創

1339 人瀏覽過

頁面中有個iframe:

複製程式碼程式碼如下:

其中a.html內容如下：

複製程式碼程式碼如下:

Insert title here

字尾"9" IE6/IE7/IE8/IE9/IE10都生效後綴" 後綴"9 字首"*" 對IE7有效

字首" " 對IE7有效
選擇器前綴 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

針對IE10有效

複製程式碼

程式碼如下:

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

那麼效果怎麼樣呢？

寫法一：直接設定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左右。

寫法二：按網傳寫法

複製程式碼程式碼如下:

<script><br />
 var flag = true;<br />
 var frameDom = $('iframe:eq(0)')[0];<br />
 $('button').on('click',function(){<br />
  if(flag){<br />
       var frameDom = $('iframe:eq(0)')[0];<br />
       var frameWin = frameDom.contentWindow;<br />
       try{ <br />
           frameWin.document.write(''); <br />
           frameWin.document.clear(); <br />
       }catch(e){}; <br />
       frameDom.src = 'b.html';<br />
       flag = false;<br />
  }else{<br />
       var frameDom = $('iframe:eq(0)')[0];<br />
       var frameWin = frameDom.contentWindow;<br />
       try{ <br />
          frameWin.document.write(''); <br />
          frameWin.document.clear(); <br />
       }catch(e){}; <br />
       frameDom.src = 'a.html';<br />
       flag = true;<br />
  }<br />
  //$('#console').append(flag ? '切換到a.html':'切換到b.html');<br />
 });<br />
</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("");

   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;

  }

 });