Nginx cookie结合前端js判断用户访问端

前面一篇《nginx配置合并js和css文件请求》，讲述了对jd首页加载js、css的技巧，继续挖掘jd首页一些前端技术。
这里我们将讲述jd是如何根据用户的访问设备进行url跳转的。
首先，我们可以看到jd的web server：JDWS，这里看起来很唬人，实际上网上一搜就明白了，就是修改了nginx配置后的名称，实际上还是用的nginx。明白了技术框架，接下来就是搜实现方法了。

前端js实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function(w) {
    var pcm = readCookie('pcm');
	var ua  = w.navigator.userAgent.toLocaleLowerCase();
    var url = 'http://union.m.jd.com/click/go.action?to=http%3A%2F%2Fm.jd.com%2F&type=1&unionId=pcmtiaozhuan&subunionId=pcmtiaozhuan&keyword=';
    var matchedRE = /iphone|android|symbianos|windows\sphone/g;
    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1, c.length)
            }
            if (c.indexOf(nameEQ) == 0) {
                return c.substring(nameEQ.length, c.length)
            }
        }
        return null
    }
    if ( matchedRE.test(ua) && pcm != '1' ) {
        w.location.href = url;
    }
})(window);

这一段代码很容易找到，未经过压缩直接放在页面上。相信基本上都能读懂这一段代码（而且代码水平一般，^_^），大致功能如下：

    1. 读取 ‘pcm’ 这个cookie的值；
    1. 读取请求头Request Headers里的User-Agent。
    1. 判断 cookie 值 !=’1’ 和正则 User-Agent 是否包含移动端平台。

前端判断代码基本上就这些了，现在就是 cookie 的产生这个问题了。

<完善中，请期待。。。>

感谢您的阅读，有不足之处请在评论为我指出！

参考资料

[1]：Nginx区分PC或手机访问不同网站

版权声明：本文为博主原创文章，未经博主允许不得转载。本文地址 http://yangyuji.github.io/2015/08/03/nginx-pc-mobile/