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:

Code kopieren Der Code lautet wie folgt:

phantomjs examples/arguments.js foo bar baz

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.