月度归档:2012年08月

用Web字体实现小图标

如果用github,或许会发现github上的小图标不是用背景图做的,并且可以选中,类似文字一样。

原理就是把图标做成了字体,然后用@font-face引入。这种方式确实不错,图标大小和颜色都可以css定义了,虽然不会太炫丽,但是也不错,可以在firebug下修改试试。

相关信息传送至:

https://github.com/blog/1106-say-hello-to-octicons
https://github.com/styleguide/css/7.0

nodejs用fs.renameSync报错cross-device link not permitted

平台是windows,linux下也会有这种错误。具体是在调用

fs.renameSync(oldfile, newfile);时候,报以下错误:

fs.js:340
  return binding.rename(pathModule._makeLong(oldPath),
                 ^
Error: EXDEV, cross-device link not permitted 'C:\Users\cssor.com\AppData\Local\T
emp\5dead17eab63b1909b2e2664bdc1810c'
    at Object.renameSync (fs.js:340:18)

通过google以后理解了所谓的cross-device是什么意思了,原来是从C盘重命名文件并保存到F盘就会导致这种错误,所以,貌似只能同一个盘符操作。。。

同时大量ajax请求同一个url的处理

情景比如: 一个load数据的按钮,因为网络比较慢或其他原因,用户一直狂点这个按钮,就会发出N多ajax请求出去。因为网络延迟,多个ajax返回的回调处理函数可能会交叉影响,造成意料外的结果。

其中一种方式是,对按钮的点击做限制,某个时间段内不允许重复点击,但是治标不治本,网络差的时候,也会发生意外状况。

这里想到的是一个目前还相对简单的处理方式,使用jQuery的jQuery ajaxPrefilter方法做预处理。普通ajax请求同理也是可以处理的。代码如下:

/* ajax请求预前过滤器 */
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    var args = originalOptions;
    var _url = args.url || location.href;
    var data = args.data || {};
    //参数名+url做唯一判定
    var xhrId = [_url];
    for(var key in data) {
        xhrId.push(key);
    };
    xhrId = xhrId.join('');

    var cacheXhr = window[xhrId]; 
    if(cacheXhr && cacheXhr.readyState != 4) {
        cacheXhr.abort();
    };
    window[xhrId] = jqXHR;
})

 

TortoiseGit的安装并用于Github

TortoiseGit安装还是很方便容易的,关键是用SSH方式连接Github需要生产key比较麻烦些。在网上找了一些,都是命令行生成key之类,看着迷迷糊糊的。后来看到Github有https方式,也算解决了连接问题,只是每次push和pull必须填GitHub的账号和密码进行验证。

不死心,又google了几次,换了几次关键词,总算找到一个靠谱点的,顺手转过来,就不重复劳动了,直接借用成果了。以下是正文。

Continue reading TortoiseGit的安装并用于Github

Chrome下input输入框内容无法选中的解决方法

来源于: http://www.cnblogs.com/danye/archive/2012/08/07/2626572.html

首先,我把选中内容放在了onfocus事件中处理,然后FF成功失败交替出现,而chrome则总是失败。采用上述链接中的方法后,解决问题。

解决方法如下;

$("input").click(function(e){
  $(this).select();
});
//阻止chrome自己的mouseup事件即可。
$("input").mouseup(function(e){
    if(window.navigator.userAgent.indexOf("Chrome")!=-1){
        var event = e||window.event; 
        event.preventDefault(); 
    }
});

 

CORS跨域试用

CORS,全称Cross-Origin Resource Sharing,中文翻译为 跨源资源共享,目前支持情况: IE8+, FF3.5+, Safari 4+, Opera 12+(? opera不是很明确,但是至少我的opera V12是测试通过的)。

测试使用nginx配置两个虚拟主机(修改hosts,弄两个本地域名),node.js为后端服务器(nginx代理一个虚拟主机转发给nodejs)。

http://a.com/cors-test.html内容如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试CORS跨域</title>
</head>
<body>
    <h3>跨域显示</h3>
    <p id="text"></p>

    <script type="text/javascript">
        function sendCORSRequest(method, url) {
            var xhr = new XMLHttpRequest();
            if('withCredentials' in xhr) {
                xhr.open(method, url, true);
            } else if(typeof XDomainRequest != 'undefined') {
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                xhr = null;
            };
            return xhr;
        };
        window.onload = function() {
            var request = sendCORSRequest('POST', 'http://cors.b.com/username/');
            var $show = document.getElementById('text');
            if(request) {
                request.onload = function(data) {
                    data = request.responseText;
                    $show.innerHTML = data;
                };
                request.onerror = function() {
                    console.info('cors is error.....')
                };
                request.send();
            } else {
                $show.innerHTML = '不支持CORS跨域....';
            };
        };
    </script>
</body>
</html>

nginx转发http://cors.b.com/username/请求给服务器端nodejs的写法也很简单:

var http = require('http');

http.createServer(function(request, response) {
    response.writeHead(200, {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': 'http://cors.a.com'
    });

    response.write('myname is tofishes');

    response.end();
}).listen(8080);

以上测试通过。

补充(http://www.weste.net/2011/4-27/75028.html):

Firefox, Safari, 和Chrome的XMLHttpRequest对象与IE的XDomainRequest对象有着相似的充分的接口,这些模式运行的很好。常见的接口属性/方法:

  • abort()——用来终止已在进程中请求。
  • Onerror()——替代onreadystatechange方法来探测错误。
  • Onload()——替代onreadystatechange方法来探测成功。
  • responseText——用来取得响应地文本。
  • send()——用来发送请求。

Preflighted请求

除了GET或POST,通过一种称之为preflighted请求的服务器透明验证机制,CORS允许使用自定义的头部和方法,以及不同主体内容类型。当你尝试使用高级选项中的一个来试着建立一个请求时,这时就建立了一个preflighted请求。该请求使用可选的方法,并发送如下头部:

  • Origin——与简单请求相同。
  • Access-Control-Request-Method——请求将要使用的方法。
  • Access-Control-Request-Headers——(可选)一个逗号分开的正被使用的自定义头部列表。

例子假定一个头部自定义为NCZ的POST请求:

Origin: http://www.nczonline.net

Access-Control-Request-Method: POST

Access-Control-Request-Headers: NCZ

在请求期间,服务器能决定是否允许这类请求。服务器通过在响应中发送以下头部来与浏览器通信。

  • Access-Control-Allow-Origin——与简单请求相同。
  • Access-Control-Allow-Methods——用逗号分开的可接受的方法列表。
  • Access-Control-Allow-Headers——用逗号分开的服务器可接受的头部列表。
  • Access-Control-Max-Age——preflighted 请求应该被缓存的时间。

如:

Access-Control-Allow-Origin: http://www.nczonline.net

Access-Control-Allow-Methods: POST, GET

Access-Control-Allow-Headers: NCZ

Access-Control-Max-Age: 1728000

preflighted 请求一旦作出,结果将按响应中规定的时间缓存下来;第一次做出这样的请求,你将引发一次额外的HTTP请求。

Firefox 3.5+, Safari 4+和Chrome都支持preflighted 请求,IE8则不支持。

Credentialed请求

默认状态下,跨域请求不提供证书(cookie、HTTP身份验证、客户端SSL证书)。你可以规定一个请求应该通过设置withCredentials属性为true来发送证书。如果服务器允许credentialed请求,那么它将用下面的头部作出响应:

如果一个credentialed请求被发送,这个头部不会作为响应地一部分被发送。浏览器不会将响应传递给JavaScript(responseText是一个空字符串,状态为 0,onerror()被调用)。注意,服务器也能发送这个HTTP头部作为preflight响应的一部分,以此来表明该源允许发送 credentialed请求。

Access-Control-Allow-Credentials: true

IE8不支持withCredentials属性,Firefox 3.5+, Safari 4+和Chrome都支持它。

 

官方博客说明: ie8/9的跨域限制

javascript跨域之同源策略

来源于:http://www.woiweb.net/same-origin-policy.html

所谓同源是指域名,协议,端口均相同。

同源的几种情况:
1.不同域名属于跨域,如:www.a.com和www.b.com,另外www.a.com 和www.a.com.cn 也属于不同域名。
2.主域名和子域名(二级域名、三级域名等)跨域,如:www.a.com 和 sub.a.com
属于跨域,sub.a.com 和 sub1.a.com 之间也是跨域。
3.不同协议属于跨域,如:http://www.a.com 和 https://www.a.com。
4.不同端口,如: www.a.com:80和 www.a.com:81 。
5.IP和域名属于跨域,如:123.125.106.16 和 www.weibo.com。