Javascript PhantomJS：获取页面的呈现维度

当使用PhantomJS进行屏幕捕获时，页面的大部分内容都是通过JavaScript添加的，或者在加载过程中通过JavaScript添加的，我遇到了一个问题。调用render（）会生成正确的图像，显示页面的全部内容，但计算document.body.clientHeight会返回一个很小的值，该值可能是添加任何内容之前页面的高度

如何在PhantomJS渲染图像时获得图像的高度/宽度？我不认为这是一个时间问题，我已经尝试过交换事情的顺序或设置长时间的延迟，以确保所有东西都是完全加载的

var wp = require('webpage');

var page = wp.create();

page.viewportSize = { width: 1024, height: 768};

page.open(url, function (status) {

    if (status === 'success') {

        var f = "rendered.png";

        //Produces an image with height 4073px
        page.render(f);

        //height is only 150
        var height = page.evaluate(function() { return document.body.offsetHeight }),
            width = page.evaluate(function() { return document.body.offsetWidth });
            console.log(height,width);

    }

});

---

尝试使用

页面。onLoadFinished

回调：

var wp = require('webpage');

var page = wp.create();

page.viewportSize = { width: 1024, height: 768};

page.open(url);

page.onLoadFinished = function() {
    var f = "rendered.png";

    //Produces an image with height 4073px
    page.render(f);

    //height is only 150
    var height = page.evaluate(function() { return document.body.offsetHeight }),
        width = page.evaluate(function() { return document.body.offsetWidth });
    console.log(height,width);
};

---

页面内容加载完成后，此选项应返回正确的高度和宽度。我认为区别在于

page.onLoadFinished

等待所有内容完成加载，而不仅仅是等待

200 OK

响应，这相当于

success

状态。

这是一个令人敬畏的解决方案，不知道为什么作者没有为他的问题设置答案当页面比视口长时，函数返回的高度将不等于屏幕截图的高度。有关正确的属性，请参见。