使用PhantomJS刮取圖像的src網址

我想要使用PhantomJS獲取給定網頁中所有圖像src網址的列表。我的理解是，這應該是非常容易的，但無論出於何種原因，我似乎無法使其工作。這是我目前擁有的代碼：使用PhantomJS刮取圖像的src網址

var page = require('webpage').create(); 
page.open('http://www.walmart.com'); 

page.onLoadFinished = function(){ 
    var images = page.evaluate(function(){ 
     return document.getElementsByTagName("img"); 
    }); 
    for(thing in a){ 
     console.log(thing.src); 
    } 
    phantom.exit(); 
}

我也試過這樣：

var a = page.evaluate(function(){ 
    returnStuff = new Array; 
    for(stuff in document.images){ 
     returnStuff.push(stuff); 
    } 
    return returnStuff; 
});

這：

var page = require('webpage').create(); 
page.open('http://www.walmart.com', function(status){ 
    var images = page.evaluate(function() { 
     return document.images; 
    }); 
    for(image in images){ 
     console.log(image.src); 
    } 
    phantom.exit(); 
});

我也試圖通過在圖像迭代評估函數並以這種方式獲取.src屬性。
他們都沒有返回任何有意義的東西。如果我返回document.images的長度，那麼頁面上有54個圖像，但試圖遍歷它們沒有任何用處。

另外，我看着下面的其他問題，是不能夠使用他們提供的信息：How to scrape javascript injected image src and alt with phantom.js和How to download images from a site with phantomjs

同樣，我只想源URL。我不需要實際的文件本身。謝謝你的幫助。

UPDATE
我嘗試使用

var a = page.evaluate(function(){ 
    returnStuff = new Array; 
    for(stuff in document.images){ 
     returnStuff.push(stuff.getAttribute('src')); 
    } 
    return returnStuff; 
});

它拋出一個錯誤，指出stuff.getAttribute（ 'SRC'）返回undefined。任何想法爲什麼會這樣？

來源

2016-07-26 gseccles

'的console.log（[] map.call（document.images，A => a.src））' – dandavis

@MayorMonty快到了。事實上，你不能返回HTMLCollection。

由於docs say：

注：參數和返回值的評估函數必須是一個簡單的原始對象。經驗法則：如果它可以通過JSON序列化，那麼它很好。

閉包，函數，DOM節點等不起作用！

因此工作腳本是這樣的：

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

page.onLoadFinished = function(){ 

    var urls = page.evaluate(function(){ 
     var image_urls = new Array; 
     var images = document.getElementsByTagName("img"); 
     for(q = 0; q < images.length; q++){ 
      image_urls.push(images[q].src); 
     } 
     return image_urls; 
    });  

    console.log(urls.length); 
    console.log(urls[0]); 

    phantom.exit(); 
} 

page.open('http://www.walmart.com');

來源

2016-07-26 19:26:27 Vaviloff

向我展示了基於我從控制檯獲得的結果的答案。 ;） – MayorMonty

謝謝一堆。完美的作品 – gseccles

我不知道有關直接JavaScript方法，但最近我用jQuery來湊圖像和其他數據，因此可以注入的jQuery

$('.someclassORselector').each(function(){ 
    data['src']=$(this).attr('src'); 
    });

來源

2016-07-26 19:02:30 abhirathore2006

jQuery的不與phantomJS打包在一起，這隻能在使用它的網站上工作 – MayorMonty

實際上你可以在任何網站注入jQuery，你也可以看看itnto Horseman.js – abhirathore2006

看看這裏http://phantomjs.org/api/webpage /method/inject-js.html – abhirathore2006

document.images後寫在下面的風格腳本不是節點的數組，它是一個HTMLCollection，它由Object構建而成。你可以看到這一點，如果你for..in它：

for (a in document.images) { 
    console.log(a) 
}

打印：

0 
1 
2 
3 
length 
item 
namedItem

現在，有幾種方法來解決這個問題：

ES6傳播運營商：這原來陣列喜歡並迭代到數組中。像這樣使用[...document.images]
Regular for循環，就像一個數組。這需要的事實的優點鍵標記像數組：
```
for(var i = 0; i < document.images.length; i++) { 
    document.images[i].src 
} 
```

甚至更多，以及

使用解決方案1，您可以使用就可以了陣列功能，如map或reduce，但支持較少（idk，如果當前版本的幻像中的javascript支持它）。

來源

2016-07-26 19:18:37 MayorMonty

使用PhantomJS刮取圖像的src網址

回答

相關問題