phantomjs - running render after loading the page, but loading never fires

Question

I'm trying to create a graph-to-png converter with phantomjs, but having a hard time getting it to work. Almost every example I see out there uses some external URL as if all you ever do with it is scraping, and the documentation is terribly lacking.

To test out things, I created a very simple d3 function that adds an <svg> tag and a blue circle inside. Looking at other questions on SO and examples, I hooked it to onLoadFinish but that event never triggers.

I'm guessing I need to open the page, but open only uses a url, which isn't relevant for me (and again, the docs are completely lacking in information. Even when I see something I think might be relevant, my only choice is guesswork. This is ridiculous )

Here's my code:

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

var content = '<html>';
content += '<body>';
content += '<h1> test title </h1>';
content += '<div id="graph">';
content += '</div>';
content += '</body></html>';    

page.content = content; 

page.injectJs('lib/d3/d3.min.js');
page.onLoadFinish = function(status) {
    console.log('loading finished'); // this never happens!
    var svg = d3.select('#graph')
                .append('svg')
                .attr({'width': 100, 'height': 100});   

    var circle = svg
        .append('circle')
        .attr({ 'cx': 10, 'cy': 10, 'r': 10, 'fill': 'blue' });   

    page.render('test.png');
    phantom.exit();
};

Any suggestions?

I just used the interactive shell to check the injection too. It doens't work. It's so weird, it's supposed to return a boolean - so injecting a file that doesn't exist returns false alright, but trying a file that does exist results in {}. WTF is wrong with this library?? It seems broken all over — yuvi
– yuvi, Commented Jun 16, 2014 at 7:36

Lightness Races in Orbit · Accepted Answer · 2014-07-03 10:16:56Z

1

It's evaluate. That was the function I was looking for. It "evaluates the given function in the context of the web page".

Finally, it's working:

page.content = content; 
page.injectJs('lib/d3/d3.min.js');
page.evaluate(function() {
    var svg = d3.select('#graph')
                .append('svg')
                .attr({'width': 100, 'height': 100});   

    var circle = svg
        .append('circle')
        .attr({ 'cx': 10, 'cy': 10, 'r': 10, 'fill': 'blue' });   

    page.render('test.png');
    phantom.exit();
};

edited Jul 3, 2014 at 10:16

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

answered Jun 16, 2014 at 9:17

yuvi

18.5k9 gold badges63 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lightness Races in Orbit Over a year ago

Please don't use code tags for emphasis or quotation; code tags are for code (or other verbatim technical stuff).

yuvi Over a year ago

@LightnessRacesinOrbit I'm not sure I agree. There's no other way to emphasize quoted text and keep it inline with the rest of the text. I never thought it was a problem since inline-code doesn't receive any syntax-highlighting and looks very similar to any quoted text (except for being inline). I've opened up a discussion on meta, I'd love for you to check it out

R. Martinho Fernandes Over a year ago

"The same but monospace" is not what "very similar" means.

yuvi Over a year ago

@R.MartinhoFernandes I agree with you. That point has been raised in the linked discussion (my suggestion is we whitelist <q> so it would be very similar)

Collectives™ on Stack Overflow

phantomjs - running render after loading the page, but loading never fires

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related