今天我們來學習如何使用 PhantomJS 來抓取動態網頁，至於 PhantomJS 是啥啊什麼的，看這裡 我們這裡就不再討論 PhantomJS 的入門基礎了。下面正題

1.我們先準備，開啟瀏覽器，輸入網址 http://news.163.com/，然後分析我們來抓如下圖所示的部分

2.編寫程式碼獲取網頁，需要使用到 web page 模組 API 如下

建立 page

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

• ###### page.content String：獲取或設定當前頁面的html。
• ###### page.plainText String：這是一個只讀屬性，獲取頁面去除html標記的文字（考慮$.text()）。

看了上面的 API 我們這裡就先獲取網頁返回 也就是使用

var page = require('webpage').create();
phantom.outputEncoding="gbk";//指定編碼方式
page.open("http://news.163.com/", function(status) {
if ( status === "success" ) {
console.log(page.body);//輸出網頁
} else {
console.log("網頁載入失敗");
}
phantom.exit(0);//退出系統
});

輸出如下：

可以看到網頁全文已經輸出完畢了（現在的延時都比較嚴重了，有個幾秒延時了，當然我們這裡重點不在這個，還沒學會走就想跑是不好的），我們就來分析怎麼才能獲取到我們需要的內容，這裡我們使用 DOM 來解析，也可以使用 cheerio 來解析，看看下圖

分析可以看出，我們現在解析的 DOM 語句可以是這樣

var pattern = 'ul li.newsdata_item div.ndi_main div a';

現在我們就要來使用 DOM 語句了，這裡再引入一個 web page 的 API

• ##### page.evaluate(fn, [param]) 對於page開啟的頁面，往往需要與其進行一些互動。 page.evaluate()提供了在page開啟頁面的上下文（下文直接用page上下文指代）執行function的功能（類比Chrome開發者工具的控制檯）。如下例：

page.open('http://m.bing.com'
 
,function(status){
    vartitle=page.evaluate(function(s){
        returndocument.querySelector(s).innerText;
    },'title');
    console.log(title);
    phantom.exit();
});

##### 在這個例子中， page.evaluate()接受兩個引數，第一個是必需的，表示需要在page上下文執行的函式 fn；第二個是可選的，表示需要傳給 fn的引數 param。 fn允許有一個返回值return，並且此返回值最終作為 page.evaluate()的返回值。這邊對於剛剛命名的 param和return有一些額外的說明和注意事項。對於整個phantom程序而言， page.evaluate()是跑在一個沙盒中， fn無法訪問一切phantom域中的變數；同樣 page.evaluate()方法外部也不應該嘗試訪問page上下文中的內容。那麼如果兩個作用域需要交換一些資料，只能依靠 param和 return。不過限制很大， param和 return必須為能夠轉化為JSON字串，換言之，只能是基本資料型別或者簡單物件，像DOM 節點、$物件、function、閉包等就無能為力了。這個方法是同步的，如果執行的內容對後續操作不具備前置性，可以嘗試非同步方法以提高效能：page.evaluateAsync()。

看懂了 API 我們接著幹活，修改成如下

var page = require('webpage').create();
phantom.outputEncoding="gbk";//指定編碼方式
page.open("http://news.163.com/", function(status) {
if ( status === "success" ) {
console.log(page.evaluate(function(){
  var d = '';
  //匹配 DOM 查詢語句
  var pattern = 'ul li.newsdata_item div.ndi_main div a img';
  var c = document.querySelectorAll(pattern);//查詢
  var l = c.length;
  //遍歷輸出
  for(var i =0;i<l;i++){
                    d=d+c[i].alt+'\n'//獲取 alt 值
                    }
            return d;
}));//輸出網頁標題
} else {
console.log("網頁載入失敗");
}
phantom.exit(0);//退出系統
});

執行結果如下圖，大功告成，

這裡說明一下，我們在的到具體的標籤之後，如果我們想獲取比如 a 標籤的 alt 屬性的值 我們可以直接寫 獲取到的單個值.alt 就像上面的一樣如果是獲取 title 屬性那麼直接.title 就可以了，如果是獲取標籤內的文字，那麼久通過.innerText 獲取 怎麼樣是不是很簡單呢

我們再修改下程式碼，讓他輸出我們需求的其他資訊

var page = require('webpage').create();
phantom.outputEncoding="gbk";//指定編碼方式
page.open("http://news.163.com/", function(status) {
if ( status === "success" ) {
var res = page.evaluate(function(){
  var d = '';
  //匹配 DOM 查詢語句 a 標籤
  var patternA = 'ul li.newsdata_item div.ndi_main div a img';
//匹配 DOM 查詢語句 新聞內容 div
  var patternNews = 'ul li.newsdata_item div.ndi_main div div div.news_title h3 a';
  //匹配 DOM 查詢語句 新聞標籤 div
  var patternNewsClass = 'ul li.newsdata_item div.ndi_main div div div.news_tag strong a';
var patternNewsKeyWords = 'ul li.newsdata_item div.ndi_main div div div.news_tag div a';
  var c = document.querySelectorAll(patternA);//查詢
  var l = c.length;
  //遍歷輸出
  for(var i =0;i<l;i++){
            d = d + "標題："+c[i].alt+'\n';
        d = d + "圖片連結: "+c[i].src+'\n';
        d = d + '\n';
            }
        c = document.querySelectorAll(patternNews);//查詢
        l = c.length;
            //遍歷輸出
              for(var i =0;i<l;i++){
                d +="新聞連結："+c[i].href+'\n';
                d = d + '\n';
                }
        c = document.querySelectorAll(patternNewsClass);//查詢
        l = c.length;
              //遍歷輸出
                for(var i =0;i<l;i++){
                    d +="新聞類別："+c[i].innerText+'\n';
                    d = d + '\n';
                    }
        c = document.querySelectorAll(patternNewsKeyWords);//查詢
        l = c.length;
                  //遍歷輸出
                  for(var i =0;i<l;i++){
                      d +="新聞關鍵詞："+c[i].innerText+'\n';
                    d +="關鍵詞連結："+c[i].href+'\n';
                    d = d + '\n';
                          }
                          d = d + '\n';
  return d;
});//輸出網頁標題

console.log(res);
} else {
console.log("網頁載入失敗");
}
phantom.exit(0);//退出系統
});

最後頁面如下，強迫症的同學可以修改下程式碼讓他顯示更合理,那麼就到這裡，可以看到 使用 PhantomJS 抓取動態頁面可謂是非常方便，不過就是載入速度上可能會慢一些。

補充一個，如果你想把結果儲存為檔案，又不想寫程式碼 那麼就用無所不能的 cmd 吧，通過 > 路徑+文件名稱 如我們這裡 test.txt 在 E 盤根資料夾下，命令如下

phantomjs hello.js >E:\test.txt

執行，可以看到已經存到檔案裡了