스크랩 이미지 src PhantomJS를 사용하는 URL

Question

PhantomJS를 사용하여 주어진 웹 페이지의 모든 이미지 src url 목록을 가져 오려고합니다. 나의 이해는 이것이 아주 쉬워야한다는 것이다. 그러나 어떤 이유에서인지, 나는 그것을 작동시키는 것처럼 보이지 않는다.

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(); 
}); 

나는 또한에있는 이미지를 반복 시도했습니다

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(); 
} 

나는이 시도했습니다 : 여기에 내가 현재 가지고있는 코드입니다 함수를 평가하고 그런 식으로 .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 나는 그것은 stuff.getAttribute ('SRC')가 undefined를 반환 없다는 오류가 발생했습니다

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

를 사용했습니다. 그게 왜 일어날까요?

Answer 1

@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'); 

Answer 2

내가 직접 자바 스크립트 방법에 대해 잘 모르지만, 최근에 난 당신이 jQuery를

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

Answer 3

document.images 주입 후 아래의 스타일로 스크립트를 작성할 노드의 배열이 아닌 수 있도록 이미지 및 기타 데이터를 긁어 jQuery를 사용, 그것은 Object으로 구축 된 HTMLCollection입니다.

이

1. ES6 확산 운영자 :이 배열 좋아집니다이 문제를 해결하는 방법은 여러 가지가 있으며,

   0 
   1 
   2 
   3 
   length 
   item 
   namedItem 
   

   지금 :

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

   인쇄 : 당신이 그것을 for..in 경우이를 볼 수 있습니다 그리고 배열로 iterables. 같이 사용하십시오 [...document.images]

2. 일반 배열 for 루프처럼 배열처럼. map 또는 같은 솔루션을 사용하기 1

   당신이 그것에 배열 함수를 사용할 수 있습니다뿐만 아니라, 아마도

   for(var i = 0; i < document.images.length; i++) { 
       document.images[i].src 
   } 
   

그리고 더 :이 키 배열과 같이 표시되어 있다는 사실을 활용 reduce이지만 지원이 적습니다 (팬텀의 현재 버전의 자바 스크립트가 지원하는 경우 idk).