如何抓取JavaScript注入圖像src和ALT與phantom.js？

Question

我使用下面的腳本使用phantom.js刮圖片：

var page = require('webpage').create(); 
url = 'https://www.everlane.com/collections/mens-luxury-tees/products/mens-crew-antique' 

page.open(url, function(status) { 

if (status !== 'success') { 
    console.log('error'); 
    phantom.exit(); 
    return; 
} 

var a = page.evaluate(function() { 
     return document.getElementsByTagName('img'); 
    }); 

SrcAlt = []; 
for (var i=0; i<a.length; i++){ 
    var src = a[i].getAttribute('src'); 
    var alt = a[i].getAttribute('alt'); 
    SrcAlt.push({"src": src, "alt": alt}); 
} 
console.log(SrcAlt); 
phantom.exit(); 
}); 

但是，腳本掛我定義變量a後，這意味着它不會遍歷並返回src和ALT屬性。當我console.log(a)它返回34，所以我相信我有適當的圖像資源。我如何訪問src和alt信息？謝謝！

Answer 1

您需要在頁面加載完成後評估您的頁面。您可以通過使用page.onLoadFinished回調來完成此操作。在所有頁面內容加載完成並且文檔已準備好之後調用此回調。像這樣的東西應該工作：

var page = require('webpage').create(); 
var url = 'https://www.everlane.com/collections/mens-luxury-tees/products/mens-crew-antique'; 

page.open(url); 

page.onLoadFinished = function() 
{ 
    var a = page.evaluate(function() { 
     return document.getElementsByTagName('img'); 
    }); 

    SrcAlt = []; 
    for (var i=0; i<a.length; i++){ 
     var src = a[i].getAttribute('src'); 
     var alt = a[i].getAttribute('alt'); 
     SrcAlt.push({"src": src, "alt": alt}); 
    } 

    console.log(SrcAlt); 
    phantom.exit(); 
}