存档

‘js’ 分类的存档

Chrome浏览器手机和平板UA的判断方法

2016年12月5日 没有评论

网站页面在进行移动适配时需要考虑如何判断终端类别,除了判别IOS和安卓外,为了达到更好的用户视觉体验,还需要区分手机和平板的差别。

通常是通过UA来区分的。

Chrome上手机和平板的区别是,手机端浏览器UA比平板端多了一个“Mobile”标识:

Phone UA:
Mozilla/5.0 (Linux; <Android Version>; <Build Tag etc.>) AppleWebKit/<WebKit Rev> (KHTML, like Gecko) Chrome/<Chrome Rev> Mobile Safari/<WebKit Rev>
Tablet UA:
Mozilla/5.0 (Linux; <Android Version>; <Build Tag etc.>) AppleWebKit/<WebKit Rev>(KHTML, like Gecko) Chrome/<Chrome Rev> Safari/<WebKit Rev>

比如,以下是Galaxy Nexus上Chrome的UA示例:

Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19

可以用以下正则表达式来判别:

Phone pattern: ‘Android’ + ‘Chrome/[.0-9]* Mobile’
Tablet pattern: ‘Android’ + ‘Chrome/[.0-9]* (?!Mobile)’

更详细的说明请参考:

Chrome-User-Agent-Strings

Browser detection using the user agent

另外,下边这个页面可以显示当前浏览器的UA:

http://my-user-agent.com/

分类: js 标签: ,

一个简单的cnzz数据采集与监控方案

2016年6月8日 2 条评论
  1. 场景
    • 有多个网站需要监控
    • 每个网站的cnzz数据只能分别通过密码来查看
  2. 方案
    • 使用casperjs定时批量抓取每个网站的cnzz数据截图,对于监控来说,一般只抓取概要图和趋势图就行了
    • 将抓取的数据按日期保存在web服务器的html目录里,命名方式为cnzz/DATE/SiteID_overview.png和cnzz/DATE/SiteID_trends.png
    • 写个简单的php页面,通过SiteID枚举出当前日期下的各网站的概要图和趋势图
  3. 实现方法
分类: js, 监控 标签: , ,

使用casperjs进行网页截图

2016年6月7日 没有评论

casperjs有个很实用的功能就是网页截图,通过几个capture函数就能很方便的实现截图功能。

简单代码如下:

var casper = require(“casper”).create();
var x = require(‘casper’).selectXPath;  //用来简化XPath操作

casper.start(‘http://new.cnzz.com/v1/login.php?siteid=123454321′, function(){
this.fill(‘form[name=”form1″]’, {
‘password': 123456
}, true);
});

casper.then(function(){
//this.capture(‘cnzz.png’); //截取整个页面
this.captureSelector(‘cnzz.png’, x(‘//*[@id=”overview_top_order_table”]’)); //截取指定的selector
});

casper.run();

需要注意的是,如果网页内包含中文,服务器上需要安装中文字符集包。CentOS上通过以下命令来安装:

yum install bitmap-fonts bitmap-fonts-cjk

分类: js 标签: ,

casperjs批量执行多个url

2016年6月3日 没有评论

使用each api可以批量访问多个url。例子:

var casper = require(“casper”).create();

var links = [
“http://baidu.com/”,
“http://qq.com/”,
“http://bing.com/”
];

casper.start();

casper.each(links, function(self, link) {
this.thenOpen(link, function() {
this.echo(this.getTitle() + ” – ” + link);
});
});

casper.run();

分类: js 标签:

使用casperjs爬取cnzz统计数据

2016年5月26日 没有评论

通过cnzz统计数据来监测网站的运行是运营和运维的一个重要手段,当站点比较多时,自动获取站点的统计数据能够极大的提高工作效率。

然而cnzz没有提供查询接口,需要我们自己手动编写代码来爬取数据。通过抓包可以发现需要很多步骤才能拿到数据,并且每次请求都携带了一些cookies等验证信息。如果一步步来实现的话非常麻烦,实际上我用Snoopy尝试进行抓取并不成功,总是跳转回登录url。

同事提供了一种方法:使用phantomjs模拟登录,试了一下,还真是方便很多。

这里提供了使用casperjs(封装了phantomjs)来进行抓取的实现代码,仅供参考。

var casper = require("casper").create()
casper.start('http://new.cnzz.com/v1/login.php?siteid=12345654321', function(){
    this.fill('form[name="form1"]', {
    'password': 1234560
}, true);   //true, 填充完毕后,立刻提交表单
});
casper.then(function(){
    var today=this.evaluate(function(){
        var tbl=document.getElementById("overview_top_order_table");
        return {
            pv:tbl.rows[1].cells[1].innerHTML,
            uv:tbl.rows[1].cells[2].innerHTML,
            ip:tbl.rows[1].cells[3].innerHTML,
        };
    });
    this.echo(today.pv);
    this.echo(today.uv);
    this.echo(today.ip);
});
casper.run();

js函数通过返回一个对象实现返回多个值

2016年5月26日 没有评论

直接简单粗暴的上代码,已亲测。

<!DOCTYPE html>
<html>
<body>

<p>本例调用的函数会执行一个计算,然后返回结果:</p>

<p id=”he”></p>
<p id=”ji”></p>

<script>
function myFunction(a,b)
{
return {he:a+b, ji:a*b};
}

document.getElementById(“he”).innerHTML=myFunction(4,3).he;
document.getElementById(“ji”).innerHTML=myFunction(4,3).ji;
</script>

</body>
</html>

分类: js 标签: