IE下使用jQuery重置iframe地址时内存泄露问题解决办法 程序员文章站 2024-01-03 22:31:46 IE下使用jQuery重置iframe地址时内存泄露问题解决办法，代码如下: </ifra...</div> <div class="content"> <p>IE下使用jQuery重置iframe地址时内存泄露问题解决办法，代码如下:</p> <p class="codebody"> <iframe src='a.html'></iframe><br> <button>测试IFRAME泄露</button></p> <p>其中a.html内容如下：</p> <p class="codetitle">代码如下:</p> <p class="codebody"><!DOCTYPE html><br> <html><br> <head><br> <meta charset="UTF-8"><br> <title>Insert title here</title><br> <script type="text/javascript" src="jquery/jquery.min.js"></script><br> <style><br> .hack{<br> /* 1.所有浏览器都有效 */<br> background-color:green;<br> /* 2.IE8~IE10,Opera有效,但是Opera兼容性可以不考虑 */<br> background-color:blue\0;<br> /* 3.IE9~IE10有效,与2组合，在2中先写针对IE8的，在此条中针对IE9|IE10 */<br> background-color:red\9\0;<br> /* 4.IE7有效,与23组合能区分出IE7/IE8/(IE9|IE10) */<br> +background-color:yellow;<br> }<br> /* 针对IE10+ */<br> @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { <br> .hack{<br> background-color:pink;<br> }<br> }<br> <br> </style><br> </head><br> <body></p> <p>后缀"\9" IE6/IE7/IE8/IE9/IE10都生效<br> 后缀"\0" IE8/IE9/IE10都生效，是IE8/9/10的hack<br> 后缀"\9\0" 只对IE9/IE10生效，是IE9/10的hack<br> 前缀"*" 对IE7有效<br> 前缀"+" 对IE7有效<br> 选择器前缀 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)<br> 针对IE10有效</p> <p class="codetitle">代码如下:</p> <p class="codebody"><br> <input type='text' value='中文'></input><br> <p class='hack' style="width:100px;<br> height:100px;"></p><br> <p id="1" style="padding:5px;position:relative;background-color:green;margin:10px;border:20px solid red;width:100%;height:200px;"><br> </p><br> <p id="2"></p><br> <span>SPAN</span><br> </body><br> </html></p> <p><br> b.html内容如下：</p> <p class="codetitle">代码如下:</p> <p class="codebody"><br> <!DOCTYPE html><br> <html><br> <head><br> <meta charset="UTF-8"><br> <title>Insert title here</title><br> <script type="text/javascript" src="jquery/jquery.min.js"></script><br> </head><br> <body><br> <span>SPAN</span><br> </body><br> </html></p> <p>网上有传，如下写法可降低内存泄露：</p> <p class="codetitle">代码如下:</p> <p class="codebody"><br> var frameDom = $('iframe:eq(0)')[0];<br> var frameWin = frameDom.contentWindow;<br> <br> try{<br> frameWin.document.write('');<br> frameWin.document.clear();<br> }catch(e){};<br> frameDom.src = 'b.html';</p> <p>那么效果怎样呢？</p> <p>写法一：直接设置URL</p> <p class="codetitle">代码如下:</p> <p class="codebody"><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> /*<br> try{<br> frameWin.document.write('');<br> frameWin.document.clear();<br> }catch(e){};<br> */<br> frameDom.src = 'b.html';<br> flag = false;<br> }else{<br> var frameDom = $('iframe:eq(0)')[0];<br> var frameWin = frameDom.contentWindow;<br> /*<br> try{<br> frameWin.document.write('');<br> frameWin.document.clear();<br> }catch(e){};<br> */<br> frameDom.src = 'a.html';<br> flag = true;<br> }<br> //$('#console').append(flag ? '切换到a.html':'切换到b.html');<br> });</p> <p>使用sIEve测试：每切换一次，#leaks增加28左右。</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="IE下使用jQuery重置iframe地址时内存泄露问题解决办法" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIzMC9iXzFfMjAxNzEyMzAxMTAwMjA2OTg0LmpwZw==" style="width: 1059px; height: 518px;" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法"></p> <p>写法二：按网传写法</p> <p class="codetitle">代码如下:</p> <p class="codebody"><br> <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> &nbnbsp; 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></p> <p>使用sIEve测试：每切换一次，#leaks增加28左右。与写法一并没有什么差别</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="IE下使用jQuery重置iframe地址时内存泄露问题解决办法" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIzMC9iXzFfMjAxNzEyMzAxMTAwMjA1Njk4LmpwZw==" style="width: 1047px; height: 403px;" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法"></p> <p>写法三：</p> <p class="codetitle">代码如下:</p> <p class="codebody"><br> var flag = true;<br> var frameDom = $('iframe:eq(0)')[0];<br> $('button').on('click',function(){<br> if(flag){<br> /*<br> try{<br> frameDom.contentWindow.document.write('');<br> frameDom.contentWindow.document.clear();<br> frameDom.contentWindow.close();<br> }catch(e){};<br> */<br> $('iframe:eq(0)').remove();<br> $('body').append("<iframe src='b.html'></iframe>");<br> flag = false;<br> }else{<br> /*<br> try{<br> frameDom.contentWindow.document.write('');<br> frameDom.contentWindow.document.clear();<br> frameDom.contentWindow.close();<br> }catch(e){};<br> */<br> $('iframe:eq(0)').remove();<br> $('body').append("<iframe src='a.html'></iframe>");<br> flag = true;<br> }<br> });</p> <p>使用sIEve测试：#leaks平均为 3,与前两种相差巨大</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="IE下使用jQuery重置iframe地址时内存泄露问题解决办法" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIzMC9iXzFfMjAxNzEyMzAxMTAwMjE1ODg1LmpwZw==" style="width: 1050px; height: 483px;" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法"></p> <p>写法四：注意到，写法三中注释了一段代码，去掉注释会怎样？</p> <p class="codetitle">代码如下:</p> <p class="codebody"><br> var flag = true;<br> var frameDom = $('iframe:eq(0)')[0];<br> $('button').on('click',function(){<br> if(flag){<br> try{<br> frameDom.contentWindow.document.write('');<br> frameDom.contentWindow.document.clear();<br> frameDom.contentWindow.close();<br> }catch(e){};<br> $('iframe:eq(0)').remove();<br> $('body').append("<iframe src='b.html'></iframe>");<br> flag = false;<br> }else{<br> try{<br> frameDom.contentWindow.document.write('');<br> frameDom.contentWindow.document.clear();<br> frameDom.contentWindow.close();<br> }catch(e){};<br> $('iframe:eq(0)').remove();<br> $('body').append("<iframe src='a.html'></iframe>");<br> flag = true;<br> }<br> });</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="IE下使用jQuery重置iframe地址时内存泄露问题解决办法" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIzMC9iXzFfMjAxNzEyMzAxMTAwMjEyNjI2LmpwZw==" style="width: 760px; height: 572px;" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法"></p> <p>此写法与写法3并没有明显差别，每次切换#leaks仍然增加3左右</p> <p>因此可以得出结论，最好的解决重置iframe地址内存泄露办法就是 把它干掉，再添加一个！</p> <p>网传不一定靠谱啊</p> <p>注：本机测试环境为 WIN7 x64 IE9</p> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/.html"> </a> </p> <p> 下一篇： <a href="/article/.html"> </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2334226.html" target="_blank" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法"> <h2> IE下使用jQuery重置iframe地址时内存泄露问题解决办法 </h2> </a> </li> <li> <a href="/article/881981.html" target="_blank" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法_jquery"> <h2> IE下使用jQuery重置iframe地址时内存泄露问题解决办法_jquery </h2> </a> </li> <li> <a href="/article/862319.html" target="_blank" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法_jquery"> <h2> IE下使用jQuery重置iframe地址时内存泄露问题解决办法_jquery </h2> </a> </li> <li> <a href="/article/375427.html" target="_blank" title="IE下使用jQuery重置iframe地址时内存泄露问题解决办法"> <h2> IE下使用jQuery重置iframe地址时内存泄露问题解决办法 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>