小文笔记 - phantomjs

小文笔记 - phantomjs

视频推荐： http://www.intalesson.com/compedium/phantom

2017-05-13

第一节：安装

  Windows安装：
  下载解压文件
  我的电脑 -> 属性 -> 高级系统设置
  点击环境变量
  在系统变量窗口中，找到Path变量，选中然后选择编辑
  新建后，添加新的环境变量（phantomjs.exe）所在路径
  在cmd中，运行phantomjs
  Mac安装：
  下载解压文件
  在用户目录下查看ls -a查看全部文件
  打开.bash_profile文件
  加入export PATH=$PATH:/Users/suoyong/phantomjs-2.1.1-macosx/bin
  在终端中输入phantomjs运行

phantomjs -v 查看版本。

phantomjs a.js 运行 a.js 文件。

phantomjs 进入程序， console.log(1) ，运行 js 代码。

phantom.exit() 退出.

第二节：核心模块

  Web page 模块
  文件模块
  系统模块
  子进程模块
  网络服务模块
  网站 phantomjs.org/api/

使用 require('模块名') 引用模块。

a.js

  var sys = require('system');

  console.log(sys.args);
  phantom.exit();

运行，a.js 是第一个参数，hi 是第二个参数。

  phantomjs a.js hi
  a.js,hi

第三节：WebPage对象（一）

  创建WebPage对象：create()
  打开网址：page.open
  在evaluate方法中操作页面（DOM，JSON，Canvas等）
  把当前页面保存成图片:page.render()

  .create() 创建 webPage 对象实例。
  .open() 打开网址。
  .evaluate() 在这个里面才能操作 web 界面中的内容。

打开百度首页标题

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

  page.open('https://www.baidu.com',function(){ // 打开后做的事
    var title = page.evaluate(function(){ // 操作页面
      return document.title
    });
    console.log(title);
    phantom.exit(1); // 1 成功 0失败
  })

打开对象

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

  page.open('https://www.baidu.com',function(){ // 打开后做的事
    var title = page.evaluate(function(){ // 操作页面
      return document.getElementById('lg');
    });
    // console.log(title) // [object Object] ，他其他是一个对象
    // console.dir(title) // [object Object] ，对象
    console.log(JSON.stringify(title)); // 所以需要转换一下
    phantom.exit(1); // 1 成功 0失败
  })

第三节：WebPage对象（二）

不能在 evaluate 中直接使用 console.log 显示 dom 信息，因为为了不影响其他页面正常运行， evaluate 是运行在沙盒中的，他没有 console.log 。

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

  page.open('https://www.baidu.com',function(){
    page.evaluate(function(){
      console.log(document.getElementById('lg')); // 不会有 console.log() 输出。
    });
    phantom.exit(1);
  })

解决方法：为 webpage 对象添加回调函数。

  var webpage = require('webpage');
  var page = webpage.create();
  page.onConsoleMessage = function(msg){
    console.log(msg);
  }
  page.open('http://www.intalesson.com/',function(){
    page.evaluate(function(){
      console.log(document.title);
    });
    phantom.exit(1);
  })

传送参数

如下例添加一个 arg 参数，值为 ‘hi’ 。

  var webpage = require('webpage');
  var page = webpage.create();
  page.onConsoleMessage = function(msg){
    console.log(msg);
  }
  page.open('http://www.intalesson.com/',function(){
    var title = page.evaluate(function(arg){
      console.log(arg);
    },'hi');
    phantom.exit(1);
  })

设置 user agent

page.settings.userAgent = '要设置的用户代理'

第五节：提交表单

• page.onLoadFinished = function(){} 当页面加载完后执行的函数。
• Dom.submit() 提交。
• 模仿点击事件 提交。

演示登录智联招聘并截图保存。

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

  page.open('http://www.zhaopin.com/',function(){
    page.evaluate(function(){
      var user = document.getElementById('loginname');
      var pass = document.getElementById('password');
      user.value = '用户名';
      pass.value = '密码';
      var submit = document.querySelector('.logbtn button');
      var evt = document.createEvent('MouseEvents'); // 创建一个鼠标事件
      evt.initMouseEvent('click'); // 初始化一个鼠标点击事件
      submit.dispatchEvent(evt); // 使用事件，提交表单
    })

    page.onLoadFinished = function(status){
      if(status == 'success'){ // 检查页面是否加载完毕
        page.render('1.png'); // 把页面保存图片
        phantom.exit(1);
      }
    }
  })

第六节：操作Cookie

• cookies 查看
• addCookie 设置
  当设置 cookie 时一定要设置 domain name value 三个值。

  phantom.addCookie({'domain':'.baidu.com','name':'xw','value':'1'});
  console.log(JSON.stringify(phantom.cookies));
  phantom.exit(1);

第七节：CasperJS

CasperJS 扩展自 phantomJS ，可更简单的操作页面元素。

phantomjs 不是 nodejs 的模块，但 casperjs 可使用 npm 安装。

• casper.start() = page.open()
• echo() = console.log()

phantomjs 像 js ， casperjs 像 jq 。

• 安装 casperjs npm install -g casperjs

第八节：步进式脚本语言

小文注

乱码问题： http://blog.csdn.net/kaosini/article/details/47252457

• 方法一：
  在 js 文件中添加 phantom.outputEncoding="gbk" 可解决乱码。
• 方法二：
  phantomjs --output-encoding=gbk a.js

​