那年闰十

功能：只要按照以下方法，便可轻松实现iframe跨域高度自适应。且还可以由此延伸其它用途，这些就靠大家天马行空的想像了。

实例：A（dev.net）域加载B(dev2.net)域iframe页面，此iframe页面要实现高度自适应。

文件：A域中a.html,proxy.js,proxy.html，B域中b.html，C域(好比图片服务器)中proxy.js
按以上3域的模式分布文件，便可轻松应对多级系统的问题。

1、a.html

<iframe autoH='yes' id="aiframe" name="aiframe" src="http://dev2.net/b.html?proxy=http://dev.net/proxy.html" style="width:100%;border:1px solid #f00;" scrolling="no" frameborder="0"></iframe>

2、proxy.html

<script type="text/javascript">
(function(){
function changeIframeSize(){
 //主域iframeName
 var mainName=window.name.replace(/_iframe$/,'');
 //主域iframeNode
 var mainNode=parent.parent.document.getElementById(mainName);
 if(mainNode.getAttribute('autoH')=='yes'){
  mainNode.style.height=document.location.hash.replace(/^#/,'')+'px';
 }

}
changeIframeSize();
})();
</script>

3、b.html

页面底部加入：

<script type="text/javascript" src="http://dev3.net/proxy.js"></script>

4、proxy.js

(function(){
function setIframeHash(){
 var searchArr=document.location.search.match(/proxy=([^&]+)/);
 if(!!searchArr){
  //设定代理页面url
  var proxyUrl=searchArr[1];
  var height=document.documentElement.scrollHeight; 
  try{
   console.log('proxyUrl:'+proxyUrl+'\nThe Iframe\'s height:'+height);
  }catch(e){};
  //生成代理iframe
  var iframe=document.createElement('iframe');
  iframe.src=proxyUrl+'#'+height;
  iframe.id=window.name+'_iframe';
  iframe.name=window.name+'_iframe';
  iframe.style.display='none';
  document.body.appendChild(iframe);
  //动态设置代理iframe的hash，以便重新获取新的高度
  var interval=setInterval(function(){
   if(document.documentElement.scrollHeight!=height){
    height=document.documentElement.scrollHeight;
    iframe.src=proxyUrl+'?rnd='+Math.random()+'#'+height;
    try{
     console.log('Reloading,The Iframe\'s height:'+height);
    }catch(e){};
   }
  },1);
 }
}
setIframeHash();
})();

本来日常工作的繁琐已经扰的人够累了，加上手头上review代码的工具用的也不爽，你说咱这心情能好吗?
使用Beyond Compare按以下方法操作，就可以让你在代码review的时候爽歪歪！
首先安装Beyond Compare，官方下载地址：http://www.scootersoftware.com/download.php，附件中是我下载的绿色中文版的。
以下内容以本人电脑为例，修改相应的软件配置：
一、CC（clearcase）
1、找到C:\Program Files\Rational\ClearCase\lib\mgrs\map文件
2、找到下列相应条目并替换
text_file_delta compare C:\Program Files\Beyond Compare\BComp.exe
text_file_delta xcompare C:\Program Files\Beyond Compare\BComp.exe
text_file_delta merge C:\Program Files\Beyond Compare\BComp.exe
text_file_delta xmerge C:\Program Files\Beyond Compare\BComp.exe
类似的修改_html，_xml，_html2，_xml2相对应的内容

二、CCRC（clearcase remote client）
1、打开文件夹C:\Program Files\IBM\Rational\ClearCase701\CCRC\plugins\com.ibm.rational.clearcase.compare_merge.win32.x86_7.0.1.D061004，该文件夹名中的D061004在每个CCRC版本都不一样，如果没找到这个文件夹，就在同级文件夹中查找相似的文件夹。将该文件夹中的ccrc_cleardiff.exe， ccrc_cleardiffmrg.exe， ccrc_worddiffmrg.exe ， ccrc_xmldiffmrg.exe存放到一个备份文件夹中，以便日后恢复使用。
2、复制4个C:\Program Files\Beyond Compare\BComp.exe，文件名分别定义成ccrc_cleardiff.exe， ccrc_cleardiffmrg.exe， ccrc_worddiffmrg.exe ， ccrc_xmldiffmrg.exe。并将其移动到上面的CCRC文件夹中。

三、SVN
1、按以下方式，打开SVN的设置菜单
 
2、选择差异查看器，并按照图示，在输入框中输入"C:\Program Files\Beyond Compare\BComp.exe" %base %mine /title1=%bname /title2=%yname /leftreadonly
 
好了，以上操作都搞定后，你就可以心情舒畅的review代码了。
更多Beyond Compare与VCS（Version Control Systems版本控制系统）的信息，请浏览：http://www.scootersoftware.com/support.php?zz=kb_vcs.php
软件的功能还是蛮强的，大家可以研究一下。

截一两张使用Beyond Compare做review的图，诱惑一下！！！

2008.12.31，2008年的最后一天！

这会儿，晚上10：30，还没有离开公司，手头上的工作还没有做完。

前言：其实这篇文章早就在酝酿中了，但近期忙于新的工作流程及日常发布，这么晚才发了出来。只写了大概思路，算是对这一作品的总结。大家多多拍砖，有兴趣的同学，可以一起交流，E-mail:leapoct@gmail.com

公司周年活动项目需要前端技术人员参与，我有幸加入。期间需要制作拉霸，现将心得总结如下，以做讨论、研究之用。

一、素材的配置规划

页面中需要嵌入3个拉霸，每个拉霸中的图片不同，对应的奖品信息不同，不用说了，xml上！！！

二、代码设计思路

1、图片的加载

xml配置好了，那加载图片就相当容易了，用MovieClipLoader对象,通过遍历xml加载图片，爽歪歪！(注：MovieClipLoader是flash中一个功能超强的加载对象，通过自身的方法，很容易快速制作loading)

同时，我们需要设置一个timer(由setInterval设置的定时器)，来监控加载的图片数目，以便程序判断是否可以初使化布局。

2、布局初使化

初期制作时先从奖品滚动开始，当时只做了一列奖品的滚动。后期才发现，其它两列的图片怎么获取呢，难道再用前面的xml遍历方法加载？

NO！There's a simple method!

BitmapData——位图滤镜,是的，就是它了。感谢as的工程师们！思路是：把图片都加载到一个类似于图库的mc中，用BitmapData自身的draw和attachMovie方法克隆图片mc，好了，接下来直接循环生成所有的mc。

3、让拉霸动起来！

动起来，也就是物体位移就行了。初期想过两种，一种是缓冲式位移，但想到这种计算太不可控，而且用于做拉霸的位移也不合适，所以选择了最简单的匀速位移，也就是让y坐标递减(因为是向上跑嘛)。一定要设置位移的转折点(即到达一列图片底部时要让这组mc的y坐标置为0)，否则，它有可能跑到天上去（疯了！）。

简单的位移还不行，动画不连贯，那就来个视觉欺骗吧。做前端的人应该都用JS做过一些图片或文字的循环滚动吧，我这里用的方法和那个差不多的，都是通过增加一些元素(这里是增加mc)，然后用脚本控制y坐标错位，来达到循环播放的效果。

为了突出动画视觉效果，采用了过渡式的缩放动画，如下图。中间大，两边小，其实3个mc只有两个做了缩放(使用y坐标计算当时mc的缩放值)，也算是个视觉期骗。

4、延时滚动

由于怕数据获取太快，奖品设置的图片又少，这样可能造成按一下按钮动画就结束了。未避免这种情况，使用倒计时的方法，就是在拉霸滚动中加入一个timer，以延时滚动。

5、与开发的交互

我和开发的交互是通过JS来建立的，Flash中有ExternalInterface这个类，可以很方便的和JS通讯。

ExternalInterface有addCallback和call两个方法，通过addCallback，JS可以调用flash中注册的函数，通过call,可以使flash调用JS的方法。(注：我用addCallback和JS通讯时，只能用一次，再用一次调用另外的函数就不起作用，不知道是我用错了，还是什么原因，希望有高手可以指点！)

三、总结

作品发布后，发现有一个不太完美的情况。就是有可能三行中每行的三个奖品图片是一样的，这是前期制作中未考虑的（后来做了一个乱序的版本，未发布）。

来支付宝好久了，虽然是做前端，但经常接触的是JS，CSS等，flash的东东就很少做了。这个作品还是蛮有意义的，做的过程中又学到不少东东。不仅是AS上的，也有和开发人员的合作，这些都是非常宝贵的实战经验，这些是最大的收获。