javascript - document.images 创建一个列表，其中只有第一个元素有效

Question

一直在修改 phantomJS 并遇到了一些我不明白的东西。我可以看到照片数量，但只能看到第一个对象

var page = require('webpage').create(),
    system = require('system'),
    address = 'http://en.wikipedia.org/wiki/Tiger'

page.open(address,function(status){

    page.render('page.png');

    if(status=="success"){
        var title = page.evaluate(function () {
            return document.title;
        });
        console.log('Page title is ' + title);

        var imgs = page.evaluate(function() {
           return document.images;
        });
        console.log(imgs.length);
        console.log(imgs[0]);
        console.log(imgs[1]);
    }
    phantom.exit();
})

其输出是:

Page title is Tiger - ....
95
[object Object]
null

知道为什么只列出第一个对象吗？

Answer 1

如前所述here ,

The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine. Closures, functions, DOM nodes, etc. will not work!

因此，在您的情况下，不要直接返回 img 元素，因为它不起作用。 imgs 不是图像列表，而是 DOM 元素列表的列表。

解决这个问题的一个非常简单的方法可能是

var page = require('webpage').create(),
    system = require('system'),
    address = 'http://en.wikipedia.org/wiki/Tiger'

page.open(address,function(status){

    page.render('page.png');

    if(status=="success"){
        var title = page.evaluate(function () {
            return document.title;
        });
        console.log('Page title is ' + title);


        var imgs = page.evaluate(function() {
            return [].map.call(document.querySelectorAll('img'), function (img) {
                return img.getAttribute('src');
            });
        });
        console.log(imgs.length);
        console.log(imgs[0]);
        console.log(imgs[1]);
    }
    phantom.exit();
})