Rumah > hujung hadapan web > tutorial js > WebKit dan Phantomjs tanpa kepala

WebKit dan Phantomjs tanpa kepala

Joseph Gordon-Levitt
Lepaskan: 2025-02-24 10:24:13
asal
203 orang telah melayarinya

Headless WebKit and PhantomJS

mata teras

    Phantomjs, pelayar tanpa kepala berasaskan WebKit yang membolehkan automasi programatik yang lebih cepat dan ujian laman web tanpa memerlukan antara muka pengguna grafik.
  • Phantomjs menyediakan ciri -ciri yang kuat seperti keupayaan untuk berinteraksi dengan halaman melalui JavaScript, yang membolehkan automasi mudah tugas seperti mengklik butang, mengemukakan borang, dan juga memuatkan dan memanipulasi halaman web menggunakan perpustakaan seperti standard DOM API atau jQuery.
  • PhantomJS menyediakan API sistem fail yang luas yang membolehkan aplikasi menyimpan kod sumber ke sistem fail, mengambil tangkapan skrin laman web, dan juga memasukkan fail skrip luaran ke dalam halaman.
  • Walaupun Phantomjs berkuasa, ia tidak begitu terintegrasi dengan Node.Js.
Jika anda membaca artikel ini, kemungkinan besar anda akan tahu apa penyemak imbas. Sekarang keluarkan GUI dan anda mendapat penyemak imbas yang tidak dipanggil

. Pelayar tanpa kepala boleh melakukan semua perkara yang sama seperti pelayar biasa, tetapi lebih cepat. Mereka sesuai untuk mengautomasikan dan menguji laman web secara programatik. Terdapat banyak pelayar tanpa kepala yang ada pada masa ini, dan Phantomjs adalah yang terbaik di kalangan mereka. Dibina di Webkit, enjin di belakang Chrome dan Safari, Phantomjs menyediakan anda dengan ciri -ciri penyemak imbas yang kuat tanpa memerlukan GUI yang besar. Bermula dengan Phantomjs adalah mudah - hanya muat turun yang boleh dilaksanakan. Seterusnya, buat fail bernama hello.js dan tambahkan baris kod berikut:

console.log("Hello World!");
phantom.exit();
Salin selepas log masuk
Salin selepas log masuk
Untuk melaksanakan skrip, jalankan arahan berikut. Perhatikan bahawa phantomjs boleh dilaksanakan mesti berada dalam direktori semasa, atau di suatu tempat di jalan alam sekitar. Jika semuanya dikonfigurasikan dengan betul, Phantomjs akan mencetak "Hello World!"

phantomjs hello.js
Salin selepas log masuk
Salin selepas log masuk

Menggunakan laman web

Selepas Phantomjs sedang berjalan, anda boleh mula mengautomasikan web. Contoh berikut memuatkan halaman utama Google dan menjimatkan tangkapan skrin ke fail. Baris 1 mencipta contoh baru laman web. LINE 4 LOADS Google.com. Selepas halaman dimuatkan, fungsi panggil balik onLoadFinished () akan dilaksanakan. Fungsi panggil balik menerima status parameter tunggal, yang menunjukkan sama ada halaman itu dimuatkan dengan jayanya. URL untuk memuatkan halaman boleh didapati di page.url. Harta ini amat berguna apabila halaman mengandungi pengalihan, dan anda ingin mengetahui dengan tepat di mana anda berada. Baris 8 menggunakan kaedah render () halaman untuk mengambil tangkapan skrin. render () boleh membuat fail PNG, GIF, JPEG, dan PDF.

console.log("Hello World!");
phantom.exit();
Salin selepas log masuk
Salin selepas log masuk

Tetapan halaman

Banyak tetapan objek halaman boleh disesuaikan mengikut keperluan permohonan. Sebagai contoh, jika anda hanya berminat untuk memuat turun kod sumber, anda boleh mempercepatkan aplikasi anda dengan mengabaikan fail imej dan menutup JavaScript. Contoh penulisan semula berikut mencerminkan perubahan ini. Tetapan yang diubah dipaparkan pada baris 3 dan 4. Perhatikan bahawa sebarang perubahan tetapan mesti dibuat sebelum memanggil terbuka (). Jika anda melihat tangkapan skrin contoh ini, anda akan melihat bahawa imej logo Google hilang, tetapi seluruh halaman tetap sama.

phantomjs hello.js
Salin selepas log masuk
Salin selepas log masuk

Mengakses sistem fail

Setakat ini, contoh kami telah memuatkan halaman dan menyimpan tangkapan skrin sebagai fail imej. Walaupun ini sudah pasti sejuk, banyak aplikasi lebih suka menyimpan kod sumber ke dalam sistem fail. PhantomJS melakukan ini dengan menyediakan pelbagai sistem fail API fail. Contoh berikut menggunakan modul sistem fail untuk menulis kod sumber Google.com ke fail. Pertama, import modul sistem fail pada baris 2. Pada baris 6, buka fail output untuk menulis. Pada baris 7, gunakan kaedah Tulis () untuk menulis data ke fail. Kod sumber sebenar boleh didapati melalui harta kandungan halaman. Akhirnya, tutup fail dan tamatkan Phantomjs.

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};
Salin selepas log masuk

Jalankan JavaScript

Salah satu ciri yang paling kuat dari Phantomjs adalah keupayaan untuk berinteraksi dengan halaman melalui JavaScript. Ini menjadikannya sangat mudah untuk mengautomasikan tugas -tugas seperti mengklik butang dan menyerahkan borang. Contoh seterusnya kami melakukan carian web dengan memuatkan laman utama Google, menaip pertanyaan, dan mengemukakan borang carian. Permulaan contoh harus kelihatan biasa. Kandungan baru bermula pada baris 8 dan kami menentukan halaman mana yang telah dimuatkan. Jika ini adalah halaman utama, kaedah menilai () halaman dipanggil. menilai () melaksanakan kod yang anda berikan dalam konteks halaman. Ini sebenarnya memberi anda keizinan yang sama seperti pemaju asal halaman. Betapa sejuknya ini?

var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.settings.javascriptEnabled = false;
page.settings.loadImages = false;
page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};
Salin selepas log masuk

di dalam penilaian () kita dapati kotak carian dan bentuk. Kami menetapkan nilai kotak carian kepada "JSPRO" dan menyerahkan borang tersebut. Ini akan menyebabkan kaedah OnLoadFinished () halaman dipecat lagi. Walau bagaimanapun, kali ini, tangkapan skrin hasil carian akan diambil, dan Phantomjs akan keluar. Phantomjs juga menyediakan dua kaedah termasukJs () dan suntikan (), yang membolehkan anda menambah fail skrip luaran ke halaman. termasukJS () digunakan untuk memasukkan sebarang fail skrip yang boleh diakses oleh halaman. Sebagai contoh, anda boleh menggunakan kod berikut untuk memasukkan jQuery dalam contoh sebelumnya. Perhatikan panggilan untuk memasukkanjs () dalam baris 9, dan sintaks jQuery di dalam penilaian ().

var page = require("webpage").create();
var fs = require("fs");
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var file = fs.open("output.htm", "w");

  file.write(page.content);
  file.close();
  phantom.exit();
};
Salin selepas log masuk
Kaedah suntikan

() adalah serupa dengan termasukJs (). Perbezaannya ialah fail skrip yang disuntik tidak perlu diakses dari objek halaman. Sebagai contoh, ini membolehkan anda menyuntik skrip dari sistem fail tempatan anda.

phantomjs dan node.js

Malangnya, Phantomjs belum diintegrasikan dengan Node.js. Sesetengah projek telah dibuat untuk cuba mengawal Phantomjs dari Node.js, tetapi mereka semua agak canggung. Projek sedia ada menggunakan modul proses kanak -kanak untuk menghasilkan contoh Phantomjs. Seterusnya, Phantomjs memuat laman web khas yang berkomunikasi dengan Node.js menggunakan WebSockets. Ia mungkin tidak ideal, tetapi ia berfungsi. Dua modul nod Phantomjs yang lebih popular adalah nod-phantom dan phantomjs-node. Saya baru -baru ini mula membangunkan modul nod Phantomjs saya sendiri yang dipanggil Ghostbuster. Ghostbuster adalah serupa dengan nod-phantom, tetapi cuba untuk mengurangkan panggilan balik dengan menyediakan perintah yang lebih kuat. Semakin sedikit panggilan ke Phantomjs, semakin sedikit masa anda membazirkan komunikasi di websocket. Pilihan lain ialah Zombie.js, penyemak imbas tanpa kepala yang dibina di atas JSDOM. Zombie tidak begitu kuat seperti Phantomjs, tetapi ia adalah modul Node.js sebenar.

Kesimpulan

Selepas membaca artikel ini, anda harus mempunyai pemahaman asas tentang Phantomjs. Salah satu ciri terbaik Phantomjs adalah kemudahan penggunaannya. Jika anda sudah biasa dengan JavaScript, lengkung pembelajaran kecil. Phantomjs juga menyokong pelbagai ciri lain yang tidak diliputi dalam artikel ini. Seperti biasa, saya menggalakkan anda melihat dokumentasi. Terdapat juga beberapa contoh yang menunjukkan fungsi penuh Phantomjs!

Soalan Lazim Mengenai WebKit dan Phantomjs

Apakah perbezaan utama antara Webkit dan Phantomjs tanpa kepala?

WebKit dan Phantomjs tanpa kepala adalah kedua -dua alat untuk mengautomasikan pelayar web. Walau bagaimanapun, perbezaan utama adalah fungsi mereka. Webkit tanpa kepala adalah penyemak imbas tanpa antara muka pengguna grafik yang dapat mengendalikannya secara programatik untuk automasi, ujian, dan penyampaian sisi pelayan. Phantomjs, sebaliknya, adalah penyemak imbas tanpa henti untuk mengautomasikan interaksi web, menyediakan API JavaScript yang menyokong navigasi automatik, tangkapan skrin, tingkah laku pengguna, dan pernyataan.

Adakah phantomjs masih dikekalkan?

Sehingga Mac 2018, PhantomJS tidak lagi diselenggarakan secara aktif. Alasan utama ialah kemunculan pelayar tanpa kepala moden seperti pelayar tanpa kepala Chrome dan pelayar tanpa kepala Firefox, yang memberikan lebih banyak ciri dan sokongan yang lebih baik.

Apakah beberapa alternatif kepada Phantomjs?

Oleh kerana PhantomJs tidak lagi dikekalkan, beberapa alternatif muncul. Ini termasuk PupPeteer, perpustakaan nod yang menyediakan API peringkat tinggi untuk mengawal Chrome atau Chromium melalui Protokol DevTools, dan Selenium Webdriver, koleksi sumber terbuka API untuk ujian automatik aplikasi web.

bagaimana phantomjs berfungsi?

Phantomjs berfungsi dengan menyediakan API JavaScript yang menyokong navigasi automatik, tangkapan skrin, tingkah laku pengguna, dan pernyataan. Ia adalah webkit tanpa kepala yang boleh ditulis menggunakan API JavaScript. Ia mempunyai sokongan cepat dan asli untuk pelbagai piawaian web: Pemprosesan DOM, pemilih CSS, JSON, CANVAS, dan SVG.

Bolehkah saya menggunakan phantomjs untuk merangkak web?

Ya, phantomjs boleh digunakan untuk merangkak web. Ia membolehkan anda memuat dan memanipulasi laman web menggunakan perpustakaan biasa seperti API DOM standard atau jQuery.

bagaimana memasang phantomjs?

Apakah peranan Webkit tanpa kepala dalam penyampaian sisi pelayan?

Webkit tanpa kepala memainkan peranan penting dalam penyerahan sisi pelayan, kerana ia membolehkan pelayan untuk membuat halaman JavaScript pra-membuat, menukarnya ke HTML, dan kemudian hantarnya ke klien. Ini meningkatkan prestasi dan SEO aplikasi web anda.

Bolehkah saya menggunakan webkit tanpa kepala untuk ujian automatik?

Ya, WebKit tanpa kepala adalah alat yang sangat baik untuk ujian automatik. Ia membolehkan anda menjalankan ujian dalam persekitaran penyemak imbas sebenar tanpa memerlukan UI yang kelihatan.

bagaimana memasang webkit tanpa kepala?

Proses pemasangan WebKit tanpa kepala bergantung pada alat khusus yang anda gunakan. Sebagai contoh, jika anda menggunakan dalang, anda boleh memasangnya melalui npm menggunakan arahan "NPM Pasang Puppeteer".

Apakah kelebihan menggunakan Webkit tanpa kepala berbanding pelayar automatik tradisional?

Webkit tanpa kepala mempunyai beberapa kelebihan berbanding pelayar tradisional dalam automasi. Ia lebih cepat kerana ia tidak mengambil masa untuk menjadikan visual. Ia juga membolehkan pelayaran automatik, skrip, yang sangat berguna untuk ujian dan merangkak web.

Atas ialah kandungan terperinci WebKit dan Phantomjs tanpa kepala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan