# 小文筆記 - phantomjs
2017-05-13

## 第一節：安裝
``` txt
  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()` 退出.


## 第二節：核心模塊
``` txt
  Web page 模塊 
  文件模塊 
  系統模塊 
  子進程模塊 
  網絡服務模塊 
  網站 phantomjs.org/api/
``` 
使用 `require(‘模塊名‘)` 引用模塊。

a.js
``` js
  var sys = require(‘system‘);

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

運行，a.js 是第一個參數，hi 是第二個參數。
``` bat
  phantomjs a.js hi
  a.js,hi
``` 

## 第三節：WebPage對象（一）
``` txt
  創建WebPage對象：create() 
  打開網址：page.open 
  在evaluate方法中操作頁面（DOM，JSON，Canvas等） 
  把當前頁面保存成圖片:page.render()

  .create() 創建 webPage 對象實例。
  .open() 打開網址。
  .evaluate() 在這個裏面才能操作 web 界面中的內容。
``` 

打開百度首頁標題
``` js
  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失敗
  })

``` 

打開對象
``` js
  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 。

``` js
  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 對象添加回調函數。
``` js
  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‘ 。
``` js
  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()` 提交。
- `模仿點擊事件` 提交。

演示登錄智聯招聘並截圖保存。
``` js
  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 三個值。

``` js
  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`

原文鏈接： http://www.cnblogs.com/daysme/p/6850956.html

小文筆記 - phantomjs