Search code examples
javascriptphantomjsviewport

How to get the height of a full html page in Phantomjs (javascript)?


Hi have tried all of these:

document.body.scrollHeight
document.body.offsetHeight
document.documentElement.clientHeight
document.documentElement.scrollHeight
document.documentElement.offsetHeight

These work in a normal browser but in Phantomjs I get the CMD (command-line window) height.. I want to get the height so that I can crop a screenshot later in the code.. and the height of the page must be as it is being viewed on a normal browser

I'm getting 300 pixels and I want to get the full html page height (that varies dependent on the URL)..


Solution

  • Those values provide the expected values as with other browsers. Full example:

    var page = require('webpage').create();
    
    var url = 'http://www.stackoverflow.com/';
    
    page.open(url, function(){
        console.log(page.evaluate(function(){
            return JSON.stringify({
                "document.body.scrollHeight": document.body.scrollHeight,
                "document.body.offsetHeight": document.body.offsetHeight,
                "document.documentElement.clientHeight": document.documentElement.clientHeight,
                "document.documentElement.scrollHeight": document.documentElement.scrollHeight
            }, undefined, 4);
        }));
        phantom.exit();
    });
    

    Output:

    {
        "document.body.scrollHeight": 8777,
        "document.body.offsetHeight": 8777,
        "document.documentElement.clientHeight": 300,
        "document.documentElement.scrollHeight": 8777
    }
    

    Reasons why it might not be the case for your:

    • The DOM is only accessible through page.evaluate(). There exists a document object outside of page.evaluate(), but it is only a dummy.
    • PhantomJS has a default viewport of 400x300 pixels. If the web page is responsive, then it will only use this size.
    • Together with the point above, the <body> may not be scrollable, but only some child element that has all the (scrollable) content. In which case every value is equal to the viewport height.