Tutorial Mula Pantas PhantomJS (Server-side JavaScript API WebKit)_kemahiran javascript

PhantomJS ialah API JavaScript bahagian pelayan berdasarkan WebKit. Ia menyokong sepenuhnya web tanpa memerlukan sokongan penyemak imbas, dan ia pantas serta menyokong pelbagai standard web secara asli: pemprosesan DOM, pemilih CSS, JSON, Kanvas dan SVG. PhantomJS boleh digunakan untuk automasi halaman, pemantauan rangkaian, tangkapan skrin halaman web, dan ujian tanpa antara muka, dsb.

Tapak web rasmi PhantomJs: http://phantomjs.org/
GitHub:https://github.com/ariya/phantomjs/wiki/Quick-Start

1. Pemasangan

Alamat muat turun pakej pemasangan: http://phantomjs.org/download.html, termasuk versi Windows, Mac OS dan Linux Anda boleh memilih versi yang sepadan untuk dimuat turun dan dinyahmampatkan (untuk kemudahan,. anda boleh Tetapkan pembolehubah persekitaran untuk phantomjs), yang mempunyai folder contoh dengan banyak kod yang telah ditulis untuk digunakan. Artikel ini menganggap bahawa phantomjs telah dipasang dan pembolehubah persekitaran telah ditetapkan.

2. Gunakan

Helo, Dunia!

Buat fail teks baharu yang mengandungi dua baris skrip berikut:

console.log('Hello, world!');
phantom.exit();

Simpan fail sebagai hello.js dan laksanakannya:

phantomjs hello.js

Hasil keluarannya ialah: Helo, dunia!

Barisan pertama akan mencetak rentetan dalam terminal dan baris kedua phantom.exit akan keluar dari operasi.
Adalah sangat penting untuk memanggil phantom.exit dalam skrip ini, jika tidak PhantomJS tidak akan berhenti sama sekali.

Hujah Skrip – Hujah Skrip

Bagaimana untuk lulus parameter dalam Phantomjs? Seperti yang ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:

phantomjs examples/arguments.js foo bar baz

Foo, bar, baz ialah parameter yang perlu dilalui:

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();

Ia akan mengeluarkan:

0: foo
1: bar
2: baz

Pemuatan Halaman – Pemuatan Halaman

Dengan mencipta objek halaman web, halaman web boleh dimuatkan, dianalisis dan diberikan.

Skrip berikut menggunakan objek halaman contoh dalam bentuk termudahnya Ia memuatkan example.com dan menyimpannya sebagai imej, example.png .

var page = require('webpage').create();
page.open('http://example.com', function () {
 page.render('example.png');
 phantom.exit();
});

Disebabkan ciri ini, PhantomJS boleh digunakan untuk mengambil tangkapan skrin halaman web dan mengambil gambar beberapa kandungan, seperti menyimpan halaman web dan SVG sebagai imej, PDF, dll. Fungsi ini hebat.

Skrip loadspeed.js seterusnya memuatkan URL khas (jangan lupa protokol http) dan mengukur masa yang diperlukan untuk memuatkan halaman.

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();
});

Jalankan skrip ini daripada baris arahan:

phantomjs loadspeed.js http://www.google.com
Ia mengeluarkan sesuatu seperti:

Memuatkan http://www.google.com Masa memuatkan 719 msec

Penilaian Kod – Penilaian Kod

Untuk menilai JavaScript atau CoffeeScript dalam konteks halaman web, gunakan kaedah evaluate(). Kod berjalan dalam "kotak pasir" dan tidak mempunyai cara untuk membaca sebarang objek dan pembolehubah JavaScript di luar konteks halaman yang dimilikinya. evaluate() mengembalikan objek, namun ia terhad kepada objek mudah dan tidak boleh mengandungi kaedah atau penutupan.

Berikut ialah contoh untuk memaparkan tajuk halaman:

var page = require('webpage').create();
page.open(url, function (status) {
 var title = page.evaluate(function () {
  return document.title;
 });
 console.log('Page title is ' + title);
});

Sebarang maklumat konsol daripada halaman web dan termasuk kod daripada evaluate() tidak akan dipaparkan secara lalai. Untuk mengatasi tingkah laku ini, gunakan fungsi panggil balik onConsoleMessage Contoh sebelumnya boleh ditulis semula sebagai:

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);
 });
});

Manipulasi DOM – Manipulasi DOM

Memandangkan skrip berjalan seolah-olah ia adalah pelayar web, skrip DOM standard dan pemilih CSS berfungsi dengan baik. Ini menjadikan PhantomJS sesuai untuk menyokong pelbagai tugas automasi halaman.

useragent.js berikut akan membaca atribut textContent bagi elemen dengan 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();
});

Contoh di atas juga menyediakan cara untuk menyesuaikan ejen pengguna.

Gunakan JQuery dan perpustakaan lain:

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()
 });
});

Permintaan dan respons rangkaian – Permintaan dan Respons Rangkaian

Apabila halaman meminta sumber daripada pelayan jauh, kedua-dua permintaan dan respons boleh dijejaki melalui kaedah panggil balik onResourceRequested dan onResourceReceived. Contoh 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);

Untuk mendapatkan maklumat lanjut tentang cara menggunakan ciri ini untuk output HAR dan analisis prestasi berasaskan YSlow, sila rujuk Halaman Pemantauan Rangkaian .