JerryQu的小站

firebug导致的验证码失效问题

admin — Thu, 14 Aug 2008 20:13:55 +0800

Firebug，就不多介绍了，搞web开发的，尤其是关注前端的估计没人不知道这个插件。最近发现打开firebug在特定的情况下会导致页面验证码失效，在此记录一下。

打开firebug面板，选择网络下的图片tab，这里会记录当前页面上用到的图片url，鼠标移到记录上，firebug会显示出该图片。这本来是一个很人性化的设计，但是问题出在，firebug在显示图片的时候会再次请求服务器。这样如果鼠标移到验证码图片上，firebug向服务器去取，服务器会认为是用户刷新了验证码，重新生成一张验证码，但此时用户的页面上看到的验证码还是旧的，这样提交肯定会通不过。

从下面这张图上可以清晰的看出，页面上的验证码是“1254”，但是鼠标移到firebug中验证码url上，firebug会再次向服务器请求验证码，服务器生成了新的验证码“9064”。这个时候再用页面上显示的验证码提交肯定就通不过了。

PS：google还说过firebug会影响gmail的性能：Firebug can make Gmail slow。

Opera下自定义右键菜单的研究

admin — Sun, 10 Aug 2008 01:25:24 +0800

Opera是一个来自挪威的浏览器，有着优秀的缓存机制，浏览网页速度很快，有着自己庞大的粉丝群。但是opera并没有支持上下文菜单事件，也就是说我们通常使用的依靠在页面中重写oncontextmenu事件来实现自定义右键菜单的方法不会工作。那么，有没有别的方法来实现自定义菜单呢？

我们来看看三个著名的产品(Fckeditor、YUI、Google Doc)怎么解决opera没有oncontextmenu事件这个问题：

Fckeditor:Fckeditor这个开源的编辑器我想不用多介绍了吧，它的最新版本已经支持了opera。那么它是怎么处理右键菜单的呢？分析源码可以知道，它注册了onmousedown事件，并且判断鼠标按下的是不是右键，如果是就显示自定义菜单。这样看似很完美，但是有两个致命的弱点：1.默认情况下opera是不检测鼠标右键点击的，也就是右键按下时根本不触发mousedown事件。除非在“工具”-“首选项”-”高级”-”内容”-“Javascript选项”中勾选“允许脚本检测右键单击”；2.opera自身的上下文菜单会跟自定义菜单一起出现，也就是说无法preventDefault。这个问题解决起来有一点点巧妙，经过实验我们可以发现，opera下在type等于button的input上点击右键不会出现系统上下文菜单，于是我们可以在mousedown时在鼠标下放一个几乎透明的type=button的input，再在mouseup的时候隐藏这个button。

YUI的MENU组件:YUI是一个先进的界面库，功能强大，使用简便。那么他是怎么解决这个问题的呢？相比于FCKEditor，YUI换了另外一种思路，既然Opera默认不支持检测右键点击，那就用左键点击来代替总可以吧，但是这样显然会干扰用户正常操作，于是YUI又加了一条规则，按下ctrl键的同时点击左键才等同于右键。“Hold down the control key and click with the left mouse button.”

Google Doc:Google出品的web office套件。Google的技术不用怀疑，那么他是怎么解决这个问题的呢？答案是：既然不能完美解决，干脆就不解决。反正Google Doc的所有操作都不是只有右键菜单才能完成。不愧是Google！

本文提到的两种解决方案实现代码

跨浏览器“复制到剪贴板”的解决方案

admin — Sat, 09 Aug 2008 23:16:08 +0800

众所周知，firefox的安全性比较高，但是安全带来的弊端就是很多功能不支持。比如说在IE下可以通过脚本来设当前网页为首页，firefox却不行。今天要讨论的是另外一个问题：怎么在firefox等不支持window.clipboardData的浏览器下实现复制呢？

首先，我们来看网易邮箱是怎么解决这个问题的。我们在firefox下进到写邮件页面，点击编辑器上的全部功能，然后点击左边的“复制”按钮，“您的浏览器安全设置不允许编辑器自动执行拷贝操作,请使用键盘快捷键(Ctrl+C)来完成”，网易邮箱给了我们这么一个提示。我觉得这个解决方案可以得80分，因为它告诉了我们两个信息：其一，之所以复制操作没有完成是因为我的浏览器很安全，为了安全损失一点用户体验一般用户是可以接受的；其二，它还提示了我们可以通过键盘快捷键ctrl+c来完成操作，这对刚上网的新手来说很人性化。但是，有没有更好的解决方案呢？

网上大致有两种解决方案，一种是需要修改firefox配置，其实firefox也是支持复制的，但是需要到about:config里去手动开启，这里不做介绍了；另外一种解决方案是本文要用到的flash。因为flash可以方便的把文字拷贝到系统剪切板中，所以我们利用flash来做跳板，只需要一行代码就能搞定：

System.setClipboard(clipboard);

这句代码的含义后面还会提到。有了这个swf的跳板，剩下的工作就简单了，如果浏览器不支持window.clipboardData，就在复制的时候把内容传给这个flash，就OK了，关键代码如下：

if (window.clipboardData){
   window.clipboardData.setData("Text",str);
}else{
   var flashId = '_clipboard_';
   var flashContent = '<embed src="clipboard.swf" FlashVars="clipboard='+str.replace(/\+/g,"%2b")+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
   if(!document.getElementById(flashId)){
   var flash = document.createElement("div");
   flash.id = flashId;
   flash.innerHTML = flashContent;
   document.body.appendChild(flash);
   }else{
   document.getElementById(flashId).innerHTML = flashContent;
   }
}

测试地址

adobe的文档中对setClipboard有如下解释：

setClipboard () 方法

public static function setClipboard(string:String):void

语言版本 : ActionScript 3.0

Player 版本 : Flash Player 9

用指定的文本字符串替换剪贴板的内容。

注意：出于安全方面的考虑，您无法读取系统剪贴板的内容。换句话说，不存在相应的 System.getClipboard() 方法。

参数

string:String — 要放置在系统剪贴板上的纯文本字符串，用于替换系统剪贴板上的当前内容（如果有）。

由此可见，我们只能利用flash把文字复制到系统剪贴板中，而不能把系统剪切板中的内容拷贝出来。

慎用keyup事件

admin — Mon, 28 Jul 2008 01:15:32 +0800

手册上对onkeydown的描述为“Fires when the user presses a key”，onkeyup的描述为“Fires when the user releases a key”，onkeypress的描述为”Fires when the user presses an alphanumeric key”,一个是键盘按键按下时触发，一个是按键弹起时触发，另一个是按下键盘的数字、字符键触发。为什么说要慎用keyup呢？

设想有这么一种情况，在web页面上有一个模拟的弹出窗口，很流行的那种，然后我们监听keyup事件，如果发现keyCode等于27，也就是说用户按了ESC键的时候隐藏窗口，这样能方便一部分高级用户，Google文档也这么做。但是如果弹出窗口中有一个输入框，情况就不那么妙了。因为我们通常用的输入法都有一个候选词的浮动窗口，有时候打错字了需要关闭这个浮动框口也会用到ESC，这个时候你会发现一旦按下ESC，输入法的候选词窗口连同那个弹出层一起消失了。

实际上，这个问题很好解决，我们只要把keyup换成keydown、keypress中的任何一个就可以了，在有候选词窗口出现的情况下按ESC是不会触发keydown/keypress事件的。这种错误监听事件的现象不仅仅在web上才有。以前的baidu hi在选择表情时，鼠标在同一个表情上来回晃动，预览区的图片会一直跳动，这个很神奇的bug就是因为hi错误地监听了每个表情的mousemove事件，导致鼠标一移动，预览区图片就重新加载，如果图片是gif格式的就始终在前几帧播放，所以看上去好像在跳动。另外以前在ubuntu下用过一个第三方的msn客户端，这个客户端在聊天窗口中按ESC会关闭当前聊天窗口，这没什么，官方的msn也是这样，但是郁闷的是在有候选词窗口的时候按ESC，聊天窗口一样会关闭，而且再次打开之前辛辛苦苦敲进去的内容全没了，这种bug让人很无奈。

keydown,keyup,keypress在有输入法窗口时对ESC处理的差异

PS：由于朋友的网站最近无法访问，原来的QGY WebIM测试地址已经失效了，新的测试地址是http://anriy000.512j.com/webim/，另外我也暂时关闭了注册入口，新用户可以用匿名帐号登录测试，基本功能都可以使用。

Google文档开始支持pdf了

admin — Sat, 28 Jun 2008 00:53:34 +0800

记得一些天前，有人就在Google文档的服务器上发现了pdf文档的小图标，于是分析Google文档可能很快就会加上对pdf文档的支持。今天上去一看，首先就在上传文档页面发现以下文字：

可上传的文件类型：
… …
PDF 文件（来自计算机的 PDF 文件最大可为 10 MB，来自网络的最大可为 2MB）

马上传来一个pdf测试了一下，发现google会把pdf一页页的显示出来，左边是内容区，右边是导航，看起来效果还不错。

但这样子没什么好玩的，无非是在服务器上把pdf处理成一张张图片，然后逐张显示出来。可神奇之处在于：如果上传的pdf里包含文字，那么在内容区是可以左键拖框选中文字的，选中后的文字会高亮显示，而且可以被复制。类似于下面这个效果：

实际上，这个时候并没有选中文字，而且也没有文字可选——底下依然是一张图片。这个高亮显示是一行行div拼出来的。google根据高亮div的位置算出哪些字应该被选中，然后把这些字放在一个隐藏的textarea里，至于ctrl+c时怎么把文字从文本框复制到粘贴板里去的就不清楚了，估计是用的flash，一会弄个不支持flash的浏览器验证一下我的猜想。

QGYWebIM新功能-支持匿名用户

admin — Wed, 04 Jun 2008 18:27:59 +0800

好久都没改过QGYWebIM程序了，今天加上了一个反映得比较多的功能：匿名用户登录。简单说来，就是系统允许用户不注册，通过点击匿名用户链接由系统分配一个临时帐号来进入聊天程序。这个功能一方面可以方便那些想体验本聊天系统又嫌注册麻烦的用户，另一方面此功能稍加改进可以应用在网上客服系统中。当然，临时帐号的权限很低，很多操作都被限制了，另外系统允许同时使用的临时帐号也有限制。

测试地址还是在http://www.shufou.com/chat/，系统限制了只允许5个匿名用户同时使用，如果你收到了登录失败提示，就说明人数已经达到上限，你可以稍后再试，当然注册用户不受此限制。当前版本为beta1.4，我会等测试一段时间后放出升级包，暂时不提供此版本的下载。

PS：今天用Google搜索了一下QGYWebim，发现网上不少网站转载了我的这个作品，很感谢大家看得起我，但是有一点希望大家注意下：转载时作者主页请链到本BLOG，测试地址请链到http://www.shufou.com/chat/。这样我才能比较好的收到bug反馈以及新功能需求，为下个版本的发布做好准备。

再PS：今天仔细研究了一下ShowPHP反映的添加好友BUG，证实在添加好友那个文本框里输入一个不存在的email再敲回车键确实会出错，这个问题以前修正过，但是后来不知道是哪次版本更新又把老版本给传上去了。按下面方法即可解决：

找到page目录下的AddFriend.asp文件，在添加好友那个表单任意位置加上：
<input name=”tbHid” type=”text” id=”tbHid” style=”display:none”/>

一个超简单的WP评论表情插件

admin — Sun, 01 Jun 2008 20:14:02 +0800

换上新博客平台以来的这几天，我一直在研究wp系统，我发现它的架构还是有不少亮点的，尤其是插件系统，强大得让我也跃跃欲试。于是就有了reply-face这个超简单的评论表情插件。

由于我对php以及wp api还不很了解，所以这个插件主要是靠js来实现表情插入和呈现的。这样做有好处：由于是客户端用正则表达式将表情字符转换为表情图片，所以不会占用服务器任何资源。本插件实际运行效果见文后评论处。

默认表情是老版QQ的，为了减少请求次数，选择表情时用的一张大图片，所以看上去不会动，提交评论后表情字符会被gif小图替换，会动的。JS文件大小3k，加载起来应该很快。

跨浏览器的本地存储解决方案

admin — Fri, 30 May 2008 15:43:55 +0800

有时候我们在前端开发中为了提高用户体验，减少向服务器请求的次数，常常要在用户的电脑上存储数据，即要实现浏览器的本地存储数据功能。我在这里整理了一下常用的几种方案。

1.针对IE6以上(含)内核的浏览器，我们可以使用UserData 行为（userData Behavior）

说明：

userData 行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData 存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。userData 行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。出于安全的考虑，相同协议使用同一个文件夹保存UserData存储区数据。

使用：

（1）首先必须在行内或文档的head部分声明如下样式：

.userData {behavior:url(#default#userdata);}

或者使用如下js代码来声明：

document.documentElement.addBehavior(”#default#userdata”);

（2）成员：

expires 设置或取得使用userData行为保存数据的失效日期，使用方法：对象ID.expires = UTC格式的时间字符串；

getAttribute() 取得指定的属性值；

load(存储区名) 从userData存储区载入存储的对象数据；

removeAttribute() 删除指定的属性值；

save(存储区名) 将对象存储到一个userData存储区；

setAttribute() 设置指定的属性值；

XMLDocument 取得存储该对象数据的XML DOM引用

（3）示例：

document.documentElement.addBehavior("#default#userdata");

document.documentElement.load("t");

document.documentElement.setAttribute("value", "test");

document.documentElement.save("t");

2.针对Firefox2(含)以上内核的浏览器，我们可以使用globalStorage

说明：

This is a global object (globalStorage) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).

Specifically, the globalStorage object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used globalStorage on this domain (developer.mozilla.org) we’d have the following storage object available to us:

globalStorage[’developer.mozilla.org’] - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.

使用：

globalStorage[location.hostname]["t"] = “test”;//赋值

var ret = globalStorage[location.hostname]["t"];//取值

globalStorage.removeItem("t");//删除

备注：

在firefox2中，我们可以在tc-eb-test00.tc.baidu.com 上的页面内使用globalStorage[“baidu.com“][“t“]=“test“来赋值，但是到了firefox3这么做却会得到一个错误提示，原因是firefox3的安全策略要求在使用 globalStorage时，指定的域名和实际的域名必须严格匹配！

3.Database Storage，HTML5里的内容，目前仅有Safari支持

说明：

This section is non-normative.

使用：

init:function(){
if(!this._inited){
this._db.transaction(function(t){
t.executeSql(”CREATE TABLE “+this.name+” (k TEXT UNIQUE NOT NULL PRIMARY KEY, v TEXT NOT NULL)”,[],function(){});
},function(){});
this._inited = true;
}
},
get:function(key,fn){
var ret = “”;
this._db.transaction(function(t){
t.executeSql(”SELECT v FROM “+this.name+” Where k=?”, [key], function(t, r){
if(r.rows.length>0){
ret=r.rows.item(0)['v'];
if(fn)fn.call(this,ret);};
},function(){
if(fn)fn.call(this,ret);
});
});
},
set:function(key,value){
this.remove(key);
this._db.transaction(function(t){
t.executeSql(”INSERT INTO “+this.name+” (k,v) VALUES (?, ?)”, [key,value],function(){});
},function(){});
},
remove:function(key){
this._db.transaction(function(t){
t.executeSql(”DELETE FROM “+this.name+” WHERE k=?”, [key],function(){});
},function(){});
}

4.针对其它浏览器，如常见的Opera，我们可以使用Cookie

说明：

A cookie is a small piece of information stored by the browser. Each cookie is stored in a name=value; pair called a crumb—that is, if the cookie name is “id” and you want to save the id’s value as “this”, the cookie would be saved as id=this. You can store up to 20 name=value pairs in a cookie, and the cookie is always returned as a string of all the cookies that apply to the page. This means that you must parse the string returned to find the values of individual cookies.

Cookies accumulate each time the property is set. If you try to set more than one cookie with a single call to the property, only the first cookie in the list will be retained.

You can use the Microsoft® JScript® split method to extract a value stored in a cookie.

使用：

function SetCookie(sName, sValue){var date = new Date(); document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString(); } function GetCookie(sName){ var aCookie = document.cookie.split("; "); for (var i=0; i < aCookie.length; i++){ var aCrumb = aCookie[i].split(”=”); if (sName == aCrumb[0]) return unescape(aCrumb[1]); } return null; } function DelCookie(sName){ document.cookie = sName + “=” + escape(sValue) + “; expires=Fri, 31 Dec 1999 23:59:59 GMT;”; }

备注：

现代浏览器一般默认都支持cookie，但是使用cookie也有几个致命的弱点：存储的信息量太少，页面向服务器发送请求的同时cookie也会被发送，无形中浪费用户的带宽。

5.其它解决方案

Google Gear：Google开发出的一种本地存储技术；

Flash：利用Flash也可以实现本地存储

这两种方法的优点是：能支持所有的OS和浏览器(Google Gear目前仅支持IE5+和Firefox1.5+)；缺点是需要用户安装额外的插件，使用起来不如前面其它3种方法简便。

6.一些链接

DOM:Storage

HTTP cookies

Flash Local Storage

Internet Explorer userData behavior

http://www.whatwg.org/specs/web-apps/current-work/#sql

safari的一些杂记

新博客开张啦

admin — Fri, 30 May 2008 14:38:34 +0800

以前那个博客程序是自己写的，有不少问题。正好借这个域名到期之际换上流行的WordPress平台吧。:-)

原来那个博客仍然保留，访问地址更改为http://old.qgy18.com，静态页面列表为http://old.qgy18.com/html/。

新博客，新开始～