我的webim被人无耻盗用了~

今天,一朋友发我一网站,看了差点没让我吐血。。。那网站把我开源的webim拿去弄成英文版的,对我这个作者只字不提,还弄了官方网站、博客和BBS。相比之下,反倒弄得像我是冒牌货似的。

既然完全公开了源代码,其实我早就预料到这样事情的发生,尽管我在说明里写上“仅供学习和研究使用,严禁用于任何商业用途”,但是对于很多站长拿这个去做盈利网站我也就默认了,偶尔还会无偿提供一下技术支持。

只是,我一再强调,我这个webim只有前端是用心写过的,后端无论是asp还是php都是随便写的,如果要用在非测试环境中,一定要重写后端代码,否则服务器会吃不消,性能也是一个问题。但是这个骗子网站在未征求我的同意情况下拿我的demo去骗钱,收39$的服务费,这不能不让人愤慨~

真是林子大了什么鸟都有了。查了一下whois,好像是北京朝阳通州?

附上骗子网址:www.fleaim.com

update:估计这骗子订了我blog的rss,在写这篇文章的不久,刚刚网站已经被解析到其他网站了。幸好我已经将所有相关资料都截图了,不知道是不是换其他域名继续坑人,我会持续关注的。

PS:新建了一个QQ群,欢迎对我这个webim或者是前端技术有兴趣的同学加进来探讨,我会抽空解答大家的疑问。
QQ群号:87485493
51JS讨论贴:http://bbs.51js.com/viewthread.php?tid=77474&extra=page%3D1&page=1

轻松去掉web中flash右键菜单

今天无意中看到一个画面还不错的webgame,随手右键单击看是否用flash写的(我对flash的判断标准是看右键菜单有无About Adobe Flash Player…字样),但是点了居然不出任何菜单。记得之前看到要完全干掉flash右键菜单要用到一些很WS的方法,不知道这个webgame怎么实现的。看了一下它的代码,原来是在flash父容器里做文章:firefox下阻止mousedown默认事件及事件传播;IE下给父容器setCapture。摘录核心代码稍加改造就是下面这个样子:

function NoRightClick(pid){//pid:flash's parentNode id
 
var el = document.getElementById(pid);
 
if(el.addEventListener){
 
el.addEventListener("mousedown",function(event){
  
if(event.button == 2){
    
event.stopPropagation(); //for firefox
    
event.preventDefault()//for chrome
  
}
 
},true);
 
}else{
 
el.attachEvent("onmousedown",function(){
  
if(event.button == 2){
    
el.setCapture();
  
}
 
});
 
el.attachEvent("onmouseup",function(){
  
el.releaseCapture();
 
});
 
el.oncontextmenu = function(){
  
return false;
 
};
 
}
};
<body>
 
<div id="testContent" style="width:800px">
 
</div>
 
<script type="text/javascript">
  var so = new SWFObject("test.swf", "t1", "800", "550", "9", "#000000");
  so.addParam("quality", "high");
  so.addParam("name", "t1");
  so.addParam("id", "t1");
  so.addParam("algin", "middle");
  so.addParam("AllowScriptAccess", "sameDomain");
  so.addParam("menu", "false");
  so.addParam("wmode", "opaque");
  so.addParam("pluginspage", "http://www.adobe.com/go/getflashplayer");
  so.write("testContent");
 
  NoRightClick("testContent");
 
</script>
</body>

经过试验,该代码可以在IE、Firefox和Google Chrome里去掉flash的右键菜单,还是挺方便的。至于这样做有什么意义呢?我暂时还没有想到——但网上搜索一下,有这种需求的人还是不少的。

演示地址

使用js callback的一个小技巧

很多情况下,我们需要跨域读取数据,或者是调用别人json格式的api,都要用到js callback这种机制。通常做法是页面上定义一个A方法,再调用第三方的url并且把回调函数名A传过去。这样做固然没什么问题,但有没有更好的方法呢?

用过jQuery的同学肯定都知道,jQuery有一个getJSON的方法,只需要两个参数(callback地址和匿名函数)就能正常工作。摘录官方示例如下:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
 
function(data){
  $.
each(data.items, function(i,item){
   $
("<img/>").attr("src", item.media.m).appendTo("#images");
  
if ( i == 3 ) return false;
 
});
 
});

很神奇吧!在这个例子中,我们并不用指定callback函数名,回调也仅仅只是一个匿名函数而已,那么它是怎么完成函数调用的呢?去看下jQuery的源代码,你会发现其实原理很简单。如果懒得看太多代码,看看下面我写的山寨版loadJSON,也能明白。

function loadJSON(url,callback){
 
var cn = "jscallback" + (+new Date());
 
var s = document.createElement("script");
 
s.type = "text/javascript";
 
s.src = url + cn;
 
window[cn] = callback;
 
document.getElementsByTagName("head")[0].appendChild(s);
};
loadJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=",
 
function(o){
 
for(var i=0;i<3;i++){
  
var img = document.createElement("img");
  
img.src = o.items[i].media.m;
  
document.body.appendChild(img);
 
}
 
});

演示地址

Flash10安全策略更新

之前写过一篇文章跨浏览器“复制到剪贴板”的解决方案,里面讲到在Firefox下如果安装了Flash,就可以利用js调用flash的setClipboard方法来将一段文字写进系统剪切板。但是最近发现,在很多电脑上这种方法已经失灵了。研究了一下,发现是flash10更新了安全策略:新的策略只允许在flash内部调用setClipboard方法,利用js调用无效;当然,如果在flash里添加事件来执行setClipboard是在允许范围内的。

除了setClipboard的更新外,还有一个比较大的更新就是:FileReference.browse和FileReference.download将只能通过Flash 内容响应鼠标或键盘的操作来使用。也就是说类似于SWFUpload一类的通过js来打开文件选择框的应用将会无法工作!SWFUpload官方采用”在SWF中引入一个按钮,用户点击此按钮来触发文件选择对话框的显示”的方案解决的这一问题。

Flash的这次安全升级给我的启示:最好不要用一种语言来做本来不属于他做的事(例如利用window.name跨域传输数据等等),尽管这些Hack在很多情况下很好用,但也最容易因为某次更新升级而失效。

参考:
http://www.jeffothy.com/weblog/clipboard-copy#comment-123736
http://www.v-sky.com/blog/?p=227

用Fiddler来调试web应用

在测试或者优化web应用时,经常需要替换一些静态资源,如css/image/js等。当然,这些工作是在开发环境来做,直接ftp替换也没什么问题。但有的时候仅仅是想调研一下而不想影响环境的稳定,或者想方便的对比两段代码效果,就可以利用一个小工具来完成工作——Fiddler。

先来简单的介绍下Fiddler(官网|需要.NET Framework v2.0|MicroSoft出品):一个集web性能分析、数据监测、自动响应、创建请求四大功能于一身,自带众多实用小工具,支持插件扩展的HTTP调试工具。通过简单的配置代理(IE中全自动、FF中需如下图手动配置),就可以开始使用Fiddler了。

2009-01-11_151753

这篇文章讲的只是利用fiddler来替换静态资源,利用的是它的自动响应功能。选择软件右侧的AutoResponder这个tab,点“Add”按钮来添加一条规则,在Rule Editor里的文本框填上要被替换资源的url,后面的文本框选择源文件就OK了。如下图:
2009-01-11_145020

2009-01-11_144953

搞定,就这么简单,现在只要请求被命中,就会被转发到指定的源文件了。修改代码后保存一下F5就能生效,既方便又不会影响到他人。这个功能挖掘下还可以干一些其它有意思的事情:配置Rule时,选择转发404之类的错误码,就可以用来测试Ajax的onError事件;把类似于Http://www.***.com/1.html这样的url转发到本地页面,就可以在本地代码里用Ajax请求www.***.com的内容。由于本地页面是通过Http://www.***.com/1.html来访问,不再有跨域问题了。这在做一个获取数据程序的时候很有用。虽说最后还是要用后端程序来解决跨域问题,但开发前期利用Fiiddler做转发,非常的高效!

利用服务器返回的header来传输数据

在Ajax编程时,经常需要从服务端获取数据。通过情况下,我们是直接把要传输的数据放在response正文中,再用responseText或者responseXML来得到内容。最近偶然发现,有时候也可以把数据放在header里,而且一些情况下这样做更有优势。

header是服务器以HTTP协议传送HTML资料到浏览器前所送出的字符串,在php中我们可以这么发送自定义header:

header("author:Jerry Qu");

然后在客户端,正常的创建一个Ajax请求,所不同的地方是callback中获取数据改成:

var a = new Ajax();
a.get("test.php",function(){
    
alert(a.req.getResponseHeader("author"));
});

这样就能取到author的值了。

Continue Reading »

写了一个显示友情链接RSS的WP插件

前几天发现一个WP插件:WordPress Plugin Live Blogroll,能在鼠标悬停博客友情链接上方时显示一个浮动层,来展示好友的最新文章。这么好玩的插件,怎能放过?我马上下载安装,发现还是有问题:一是样子不够帅;再者部分国内的RSS不能正常读取。于是我就产生了自己动手写一个类似插件的念头。

第一步要从链接地址中自动获取RSS地址,幸好现在大多数的博客都遵循一个统一的标准来标识RSS入口。如:

<link rel="alternate" type="application/rss+xml" title="JerryQu的小站 RSS Feed" href="http://feed.qgy18.com" />

只需要查找type=”application/rss+xml”的link标记的href属性就可以了。在php中用preg_match_all方法很容易就可以匹配出来。

然后,就可以用file_get_contents取到xml,之后用simplexml对象来解析。值得注意的是,一定要把取回的xml缓存起来,就现在的网络情况来看,实时取是不太现实的。我是把xml直接生成文件来缓存的,根据文件的最后修改时间判断是否过期。前端用JS来异步获取数据,生成浮动层,浮动层的外观是仿照MSN联系人Tip布局的,加了一个小箭头来指示当前显示的是哪条链接。

具体效果可以在本页面右侧链接处查看。现在只是实现了功能,插件的配置页还没有完成。

下载地址:http://www.qgy18.com/g/?id=2 (累计下载:次)

QGYWEBIM(php+mysql版)提供下载

写完PHP版的QGYWEBIM也有一个多月了。这期间没测试出什么大毛病,加上最近不少人问我要PHP版的代码,就整理了一下提供下载了。相比之前的ASP版本,有几处小变动,在这里简单说明下:

1.支持了匿名用户。其实这个小功能是当初为了方便那些想要帮忙测试而又不想注册帐号的同学加上的。没有好好的设计,没太多实用性,就没有提供一个管理匿名用户的入口。如果你确实想提供匿名用户登录功能的话,可以参考这个帖子

2.改进了查找好友的方式。之前很多人跟我反映查找好友太不方便了,确实只能通过email地址来添加好友很不友好,尽管MSN一直如此。现在好了,我在这个版本中把查找好友的功能稍微改进了下,除了可以精确查找,还可以像QQ一样根据一些条件模糊匹配。ASP版的我也改了,只需要替换两个文件就可以了。

3.合并了一些图片。众所周知,将一些小图片合成一张大图可以显著的减少连接数,提高效率,这也就是人们常说的css sprites技术。但是为什么之前的版本中那么多的小图没有合并呢?那是因为我太懒了,合成一张大图片还要算像素太麻烦,哈哈。不过呢,我最近发现了一个很好的在线工具,它可以自动帮你把小图合并,并帮你算好像素,于是我就象征性的把其中一些小图片合并了一下,免得被人鄙视。。。

下载地址[已修复]:http://www.qgy18.com/g/?id=1 (累计下载:次)

一些相关链接:

QGYWEBIM运行截图:http://www.qgy18.com/ablum/?d=5176709877654128385

PHP+MySQL版测试地址:http://www.qgy18.com/lab/webim/

ASP+Access版测试地址:http://old.qgy18.com/webim/

说明文档:http://old.qgy18.com/webim/readme.html

Maxthon引发的系列问题

Maxthon,一个大家熟得不能再熟的软件。我某位同事甚至这样的赞许它:“对我来说,Maxthon就是浏览器,浏览器就是Maxthon”。我这里不想讨论Maxthon是好是坏,只是如实的记录工作中由Maxthon带来的一些问题。我的Maxthon是官方的2.1.4,采用默认配置。由于Maxthon是一个IE Shell,我在测试中用系统自带的IE作为参考。

一、Maxthon会错误的处理某些JS事件。试着在IE地址栏中输入下列代码:

javascript:window.onbeforeunload = function(){return "你真的要关闭?"};void(0);

然后关闭浏览器当前Tab(IE7、IE8),或当前窗口(IE6),你会发现系统会给出“确实要离开页面…”之内的提示,选择“确定”才会执行关闭。但Maxthon不会这么做,弹出关闭提示时,当前tab/窗口已经关闭,无论选什么都无济于事。另外一个问题是Maxthon里鼠标右键点击,得到的返回键值不对。在地址栏输入以下代码:

javascript:document.onmousedown = function(){alert(event.button)};void(0);

在IE里右键单击返回的是2,而Maxthon返回0。这个就很让人费解了,都是IE内核,不应该有不同呐。

Continue Reading »

如何使用Flash来实现本地存储

我在5月份的一篇文章里列举了一些本地存储解决方案,包括常见的Cookie、UserData和不是那么常见的globalStorage、Database Storage。文章最后提到了另外两种解决方案:Google Gear和Flash,当时因为觉得用不上就没仔细研究。但实际应用中,那篇文章列出的方案还是不能满足项目的需求。这篇文章就讲一下如何使用Flash来实现本地存储,以及该方案使用的场合。

拿IE6来说,如果要在本地大量存放数据,Cookie因为存放内容太少、浪费用户带宽首先就应该被淘汰掉。UserData在大多数情况下能满足需求,但是它也有一个致命的弱点:只能读取同目录存储,也就是a目录下一个文件不能读取b目录下两一个文件存放的数据。MSDN说明如下:

Security Alert For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store. 全文>>

也就是说如果项目中要跨文件夹操作本地存储,UserData也必须被淘汰了。IE不支持Database Storage,IE8才增加了对globalStorage的支持,这个时候Flash就派上用场了。

Continue Reading »

 Page 1 of 3  1  2  3 »