2015第7周二技术学习

时间：2015-02-10 22:59:00 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：

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

页面中有个iframe:

1 2	`<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{
 /* 1.所有浏览器都有效 */
 background-color:green;
 /* 2.IE8~IE10,Opera有效,但是Opera兼容性可以不考虑 */
 background-color:blue\0;
 /* 3.IE9~IE10有效,与2组合，在2中先写针对IE8的，在此条中针对IE9|IE10 */
 background-color:red\9\0;
 /* 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都生效
后缀"\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;
   /*
   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>
 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){
   /*
   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;
  }
 });

使用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地址内存泄露办法就是把它干掉，再添加一个！

来源： <http://my.oschina.net/lldy/blog/375626>

什么是无编程？

这是项目的的一个核心，不需要直接编程就能实现做出各种精美，复杂的应用，而且是几乎跨是有平台的，目前来说可以直接通过网页在线看，也可以生成APK、IPA应用文件在移动端安装，也可以在桌面通过exe加壳运行，反正就是实现的代码只有一份，可以跑基于WebView的任意平台。

如何实现无编程？

简单的来说用户可以通过一套软件，可以把具体的抽象设计给控件化，有点类似.net的控件一样，自动生成代码。

如何实现跨平台？

跨平台很简单就是通过web App技术就可以

其实最重要的2个方向我们已经确定了，那么我们怎么才能实现无编程快速应用开发？

我们只需要把用户想要操作的的行为告诉前端代码就就可以了，这里其实就是一个编程的传递了，传统的开发都是我们开发者引导用户行为，那么现在的的方式就是让制作者引导，而不是开发者处理了，我们开发者要做的一个事件就是，如何让编辑者的逻辑设计能够最终实现

用户的抽象行为是可以用数据描述的，我们可以把用户的行为写到数据库里面，然后前端代码通过读取数据库来获取这个行为，正好HTML5的Web Sql Database就能完全胜任这个工作的，那么我们现在整的设计原型就出来了：通过PPT抽象用户的设计写入到数据库，前端通过读取数据库还原用户的设计
来源： <http://www.cnblogs.com/aaronjs/p/4255232.html#_h1_3>

来自为知笔记(Wiz)

2015第7周二技术学习

标签：

原文地址：http://www.cnblogs.com/doit8791/p/4285051.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行