phantomJS简单使用方法

发表于 | 分类于 | 次

phantomJS简单使用方法

  1. 概述
    有时，我们需要浏览器处理网页，但并不需要浏览，比如生成网页的截图，抓取网页数据等操作。PhantomJS的功能，就是提供一个浏览器环境的命令行接口，你可以把它看做一个“虚拟浏览器”，除了不能浏览，其它与正常浏览器一样。它的内核是webkit引擎，不提供图形界面，只能在命令行中使用。

  2. webpage模块
    webpage模块是PhantomJS的核心模块，用于网页操作。

1
2
var webpage = require('webpage');
var page = webpage.create();

上面代码表示加载PhantomJS的webpage模块，并创建一个实例。

  • open()方法

    该方法用于打开具体的网页

1
2
3
4
5
var page = require('webpage').create();
page.open(url,function(s){
    console.log(s);
    phantom.exit();  
});

上述代码中，open()方法，用于打开具体的网页。他接受两个参数。第一个参数是网页的网址，第二个参数是回调函数，网页打开后该函数将会运行，它的参数是一个表示状态的字符串，如果打开成功就是success，否则就是fail。

只要接受到服务器返回的结果，PhantomJS就会报告网页打开成功，而不管服务器是否返回404或者500错误。

open方法默认使用GET方法，与服务器通信，但是也可以使用其它方法。

1
2
3
4
5
6
var webpage = require('webpage');
var page = webpage.create();
var postbody = 'user=user&password=password';
page.open(url,'POST',postbody,function(status){
    console.log('Status: '+status);
});

上面代码中，使用post方法向服务器发送数据。open方法的第二个参数来指定http方法，第三个参数用来指定该方法所要使用的数据。

open方法还允许提供配置对象，对HTTP请求进行更详细的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var webpage = require('webpage');
var page = webpage.create();
var settings = {
    operation: 'POST',
    encoding: 'utf-8',
    headers: {
        'Content-Type': 'application/json'
    },
    data: JSON.stringfy({
        some: 'data',
        another: ['customer','data']
    });
};
page.open(url,settings,function(status){
    console.log('Status'+status);
})
  • evalute()方法

    evalute方法用于打开网页后，在页面中执行JavaScript代码。

1
2
3
4
5
6
7
8
9
var page = require('webpage').create();
page.open(url,function(status){
    var title = page.evalute(function(){
        return document.title;    
    });
    console.log('Page title is'+ title);
    phantom.exit();
    
});

网页内部的console语句，以及evalute方法内部的console语句，默认不会显示在命令行。这时,可以用onConsoleMessage方法监听这个事件，进行处理。

1
2
3
4
5
6
7
8
9
10
var page = require('webpage').create();
page.onConsoleMessage = function(msg) {
  console.log('Page title is ' + msg);
};
page.open(url, function(status) {
  page.evaluate(function() {
    console.log(document.title);
  });
  phantom.exit();
});
  • includeJs()

    includeJs方法用于页面加载外部脚本，加载结束后就调用指定的回调函数。

1
2
3
4
5
6
7
8
9
var page = require('webpage').create();
page.open(url,function(){
    page.includeJs('jquery.min.js',function(){
        page.evalute(function(){
            $('button').click();
        });
    });
    phantom.exit();
});

上面的例子在页面中注入jquery脚本，然后点击所有的按钮。需要注意的是，由于是异步加载，所以Phantom.exit()语句要放在page.includeJs()方法的回调函数之中，否则页面会过早移除。

  • render()方法

render方法用于将网页保存成图片，参数就是指定的文件名。该方法根据后缀名，将网页保存成不同的格式，目前支持PNG,GIF,JPEG和PDF。

1
2
3
4
5
6
7
var webpage = require('webpage');
var page = webpage.create();
page.viewportSize = {width: 1920, height: 1080};
page.open(url,function(){
    page.render('main.jpeg',{format: 'jpeg',quality: '100'});
    phantom.exit();
});

该方法还可以接受一个配置对象，format字段用于指定图片格式，quality字段用于指定图片质量，最小为0，最大为100。

  • viewportSize,zoomFactor

viewportSize属性指定浏览器视口的大小,即网页加载的初始浏览器窗口大小。

1
2
3
4
5
6
var webpage = require('webpage');
var page = webpage.create();
page.viewportSize = {
    width: 480,
    height: 800
};

viewportSize的height字段必须指定，不可省略。

zoomFactor属性用来指定渲染时页面的放大系数，默认是1。

1
2
3
4
var webpage = require('webpage');
var page = webpage.create();
page.zoomFactor = 0.25;
page.render('capture.png');