Heim > Artikel > Web-Frontend > PhantomJS-Schnellstart-Tutorial (Serverseitiges JavaScript-API-WebKit)_Javascript-Kenntnisse
PhantomJS ist eine serverseitige JavaScript-API basierend auf WebKit. Es unterstützt das Web vollständig, ohne dass Browserunterstützung erforderlich ist, ist schnell und unterstützt nativ verschiedene Webstandards: DOM-Verarbeitung, CSS-Selektoren, JSON, Canvas und SVG. PhantomJS kann für Seitenautomatisierung, Netzwerküberwachung, Webseiten-Screenshots und schnittstellenlose Tests usw. verwendet werden.
Offizielle Website von PhantomJs: http://phantomjs.org/
GitHub:https://github.com/ariya/phantomjs/wiki/Quick-Start
1. Installation
Download-Adresse des Installationspakets: http://phantomjs.org/download.html, einschließlich Windows-, Mac OS- und Linux-Versionen. Sie können die entsprechende Version zum Herunterladen und Dekomprimieren auswählen (der Einfachheit halber). Sie können Umgebungsvariablen für PhantomJS festlegen), wo es einen Beispielordner mit einer Menge bereits geschriebenem Code zur Verwendung gibt. In diesem Artikel wird davon ausgegangen, dass PhantomJS installiert und Umgebungsvariablen festgelegt wurden.
2. Verwendung
Hallo Welt!
Erstellen Sie eine neue Textdatei mit den folgenden zwei Skriptzeilen:
console.log('Hello, world!'); phantom.exit();
Speichern Sie die Datei als hello.js und führen Sie sie aus:
phantomjs hello.js
Das Ausgabeergebnis ist: Hallo Welt!
Die erste Zeile gibt die Zeichenfolge im Terminal aus und die zweite Zeile phantom.exit beendet den Vorgang.
Es ist sehr wichtig, in diesem Skript phantom.exit aufzurufen, sonst stoppt PhantomJS überhaupt nicht.
Skriptargumente – Skriptargumente
Wie übergebe ich Parameter in Phantomjs? Wie unten gezeigt:
Foo, bar, baz sind die zu übergebenden Parameter. So erhalten Sie sie:
var system = require('system'); if (system.args.length === 1) { console.log('Try to pass some args when invoking this script!'); } else { system.args.forEach(function (arg, i) { console.log(i + ': ' + arg); }); } phantom.exit();
Es wird ausgegeben:
0: foo
1: Balken
2: baz
Seite wird geladen – Seite wird geladen
Durch das Erstellen eines Webseitenobjekts kann eine Webseite geladen, analysiert und gerendert werden.
Das folgende Skript verwendet das Beispielseitenobjekt in seiner einfachsten Form. Es lädt example.com und speichert es als Bild, example.png.
var page = require('webpage').create(); page.open('http://example.com', function () { page.render('example.png'); phantom.exit(); });
Aufgrund dieser Funktion kann PhantomJS zum Erstellen von Screenshots von Webseiten und zum Erstellen von Schnappschüssen einiger Inhalte verwendet werden, z. B. zum Speichern von Webseiten und SVGs als Bilder, PDFs usw. Diese Funktion ist großartig.
Das nächste Loadspeed.js-Skript lädt eine spezielle URL (vergessen Sie das http-Protokoll nicht) und misst die Zeit, die zum Laden der Seite benötigt wird.
var page = require('webpage').create(), system = require('system'), t, address; if (system.args.length === 1) { console.log('Usage: loadspeed.js <some URL>'); phantom.exit(); } t = Date.now(); address = system.args[1]; page.open(address, function (status) { if (status !== 'success') { console.log('FAIL to load the address'); } else { t = Date.now() - t; console.log('Loading time ' + t + ' msec'); } phantom.exit(); });
Führen Sie dieses Skript über die Befehlszeile aus:
phantomjs loadspeed.js http://www.google.com
Es gibt etwa Folgendes aus:
Laden http://www.google.com Ladezeit 719 ms
Code-Evaluierung – Code-Evaluierung
Um JavaScript oder CoffeeScript im Kontext einer Webseite auszuwerten, verwenden Sie die Methode „evaluieren()“. Der Code läuft in einer „Sandbox“ und hat keine Möglichkeit, JavaScript-Objekte und -Variablen außerhalb des Kontexts der Seite, zu der er gehört, zu lesen. evaluieren() gibt ein Objekt zurück, ist jedoch auf einfache Objekte beschränkt und darf keine Methoden oder Abschlüsse enthalten.
Hier ist ein Beispiel für die Anzeige des Seitentitels:
var page = require('webpage').create(); page.open(url, function (status) { var title = page.evaluate(function () { return document.title; }); console.log('Page title is ' + title); });
Alle Konsoleninformationen von der Webseite und einschließlich Code von „evaluieren()“ werden standardmäßig nicht angezeigt. Um dieses Verhalten zu überschreiben, verwenden Sie die Rückruffunktion onConsoleMessage. Das vorherige Beispiel kann wie folgt umgeschrieben werden:
var page = require('webpage').create(); page.onConsoleMessage = function (msg) { console.log('Page title is ' + msg); }; page.open(url, function (status) { page.evaluate(function () { console.log(document.title); }); });
DOM-Manipulation – DOM-Manipulation
Da das Skript wie ein Webbrowser ausgeführt wird, funktionieren Standard-DOM-Skripte und CSS-Selektoren einwandfrei. Dadurch eignet sich PhantomJS zur Unterstützung einer Vielzahl von Seitenautomatisierungsaufgaben.
Die folgenden useragent.js lesen das textContent-Attribut des Elements mit der ID myagent:
var page = require('webpage').create(); console.log('The default user agent is ' + page.settings.userAgent); page.settings.userAgent = 'SpecialAgent'; page.open('http://www.httpuseragent.org', function (status) { if (status !== 'success') { console.log('Unable to access network'); } else { var ua = page.evaluate(function () { return document.getElementById('myagent').textContent; }); console.log(ua); } phantom.exit(); });
Das obige Beispiel bietet auch eine Möglichkeit, den Benutzeragenten anzupassen.
Verwenden Sie JQuery und andere Bibliotheken:
var page = require('webpage').create(); page.open('http://www.sample.com', function() { page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() { page.evaluate(function() { $("button").click(); }); phantom.exit() }); });
Netzwerkanfragen und -antworten – Netzwerkanfragen und -antworten
Wenn eine Seite eine Ressource von einem Remote-Server anfordert, können sowohl die Anfrage als auch die Antwort über die Rückrufmethoden onResourceRequested und onResourceReceived verfolgt werden. Beispiel netlog.js:
var page = require('webpage').create(); page.onResourceRequested = function (request) { console.log('Request ' + JSON.stringify(request, undefined, 4)); }; page.onResourceReceived = function (response) { console.log('Receive ' + JSON.stringify(response, undefined, 4)); }; page.open(url);
Weitere Informationen zur Verwendung dieser Funktion für die HAR-Ausgabe und die YSlow-basierte Leistungsanalyse finden Sie auf der Netzwerküberwachungsseite.