月度归档：2012年08月

用Web字体实现小图标

html&css、

如果用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

JavaScript

平台是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的处理

JavaScript

情景比如： 一个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输入框内容无法选中的解决方法

JavaScript

来源于： 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跨域试用

JavaScript、

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跨域之同源策略

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。