phantom.JS tråden - Full web stack Ingen nettleser kreves

Dan-Levi · 21. juli 2014

Hei,

Jeg fant ingen tråder i forumet her om PhantomJS, derfor ville jeg være intiativtaker til en tråd.

For dere som ikke vet hva PhantomJS er:

PhantomJS er en WebKit nettleser med Javascript API du kjører fra konsoll. Den har rask og innebygd støtte for ulike webstandarder: DOM håndtering, CSS selector, JSON, Canvas og SVG. Den kan i motsetning til mange andre løsninger nå dynamisk lastet innhold.

Jeg har i dag forsøkt meg på et mindre prosjekt hvor jeg hadde som mål å hente ut bilder og tilhørende informasjon basert på et pinterest søk og lage et json objekt ut i fra dette.

Pinterest laster inn bildene sine dynamisk, så dette hadde ikke vært mulig med f.eks. PHP.

Her er hva jeg kom opp med.

var system = require('system');
var args = system.args;
var page = require('webpage').create();
var fs = require('fs');
var server = require('webserver').create();
// Server kjører, print ut i cmd
console.log('Server running');
if (args.length !== 2) {
    // Ingen argumenter er gitt til scriptet, stopp.
    console.log('Usage: phantomjs p.js <port>');
    phantom.exit();
} else {
    // starter med definert port
    var service = server.listen(args[1], function(request, response) {
        response.statusCode = 200;
        if (typeof request.url != 'undefined' && request.url != '') {
            var parseQueryString = function(url) {
                var str = url;
                var objURL = {};
                str.replace(
                    new RegExp("([^?=&]+)(=([^&]*))?", "g"),
                    function($0, $1, $2, $3) {
                        objURL[$1] = $3;
                    }
                );
                return objURL;
            };
            var params = parseQueryString(request.url);
            // sjekker at det er url definert i respons og at den ikke er tom
            if (typeof params['q'] != 'undefined' && params['q'] !== '') {
                var q = params['q'];
                // Åpner pinterest søk med søkeordet
                if (openPinPage(q) !== false) {
                    window.setTimeout(function() {
                        var json = fs.read('output.json');
                        response.write(json);
                        response.close();
                    }, 6000);
                } else {
                    response.write('<html><body>Error: output.json not generated.</body></html>');
                    response.close();
                }
            }
        }
    });

    function openPinPage(keyword) {
        page.open("http://www.pinterest.com/search/pins/?q=" + keyword, function(status) {
            if (status === "success") {
                //Siden er åpnet, injiser jQuery
                page.includeJs("http://code.jquery.com/jquery-latest.js", function() {
                    if (getImgsData(keyword)) {
                        return true;
                    } else {
                        return false;
                    }
                });
            }
        });
    }

    function getImgsData(keyword) {
        var data = page.evaluate(function() {
            // Javascript objekt som holder på informasjonen
            var imgs = {
                titles: [],
                hrefs: [],
                srcs: [],
                externalLinks: []
            };
            // bruker jQuery for å hente ut informasjon på pins
            $('a.pinImageWrapper').each(function() {
                imgs.titles.push($(this).attr('title'));
                imgs.hrefs.push('http://www.pinterest.com' + $(this).attr('href'));
                var img = $(this).children('.fadeContainer').children('img.pinImg');
                imgs.srcs.push(img.attr('src'));
                imgs.externalLinks.push($(this).children('.pinDomain').text());
            });
            // returner objektet 
            return imgs;
        });
        if (data.titles.length >= 1) {
            var json = JSON.stringify(data);
            // Det er treff, skriver json til fil og gi beskjed i konsoll
            fs.write("output.json", json, "w");
            console.log('Generated json file for search term ' + keyword);
            return true;
        } else {
            fs.write("output.json", "{'status':'No images found'}", "w");
            return false;
        }
    }
}

Jeg håper andre kaster seg på og blir med i denne tråden.

Innspill og tips til forbedring, eller kommentarer der jeg har gjort ting klønete eller rett og slett feil taes gjerne imot.

Endret 21. juli 2014 av JanTerjeRiisOttoJohansen

Karl Skapeland · 21. juli 2014

Bare for å ha nevnt det, så finnes CasperJS, et abstraksjonslag oppå PhantomJS.

var casper = require('casper').create();

casper.start('http://casperjs.org/', function() {
    this.echo(this.getTitle());
});

casper.thenOpen('http://phantomjs.org', function() {
    this.echo(this.getTitle());
});

casper.run();

Gjør det enklere å skrive kode der man ellers hadde brukt mange nivåer av callbacks (callback hell).

Endret 21. juli 2014 av Karl Skapeland

Dan-Levi · 23. juli 2014

Hei Karl. Har sett litt på casperJS før men ikke testet før i går. Var en del enklere :-)

Wattengård · 1. august 2014

Bruker en kombinasjon av C#/.NET, Node og Phantom for å generere PDF og Powerpoint-rapporter til et system jeg drifter

Logg inn

phantom.JS tråden - Full web stack Ingen nettleser kreves

Anbefalte innlegg

Dan-Levi

Lenke til kommentar

Videoannonse

Karl Skapeland

Lenke til kommentar

Dan-Levi

Lenke til kommentar

Wattengård

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer