如何使用 phantom.js 抓取 javascript 注入的图像 src 和 alt？答案

【问题标题】：How to scrape javascript injected image src and alt with phantom.js?如何使用 phantom.js 抓取 javascript 注入的图像 src 和 alt？
【发布时间】：2013-09-28 04:00:53
【问题描述】：

我正在使用以下脚本通过 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 信息？谢谢！

【问题讨论】：

标签： javascript web-scraping phantomjs headless-browser

【解决方案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();
}

【讨论】：