PhantomJS 快速入门：服务器端 JavaScript API 使用指南

作者：青柠时间：2026-10-29 13:22:06浏览：479

本文介绍基于 WebKit 的 PhantomJS，一个无需浏览器的服务器端 JavaScript API。内容涵盖安装配置、Hello World 示例、命令行参数传递、页面加载与截屏、代码沙箱评估、DOM 操作及网络请求监控，适用于页面自动化和无界面测试场景。

PhantomJS 简介与安装

PhantomJS 是一个基于 WebKit 引擎的服务器端 JavaScript API。它无需依赖浏览器即可全面支持 Web 标准，包括 DOM 处理、CSS 选择器、JSON、Canvas 和 SVG 等，且运行速度极快。该工具广泛应用于页面自动化、网络监控、网页截屏以及无界面测试等场景。

PhantomJS 官方网站地址为 http://phantomjs.org/，GitHub 项目页面位于 https://github.com/ariya/phantomjs/wiki/Quick-Start。

一、安装

安装包下载地址为 http://phantomjs.org/download.html，提供 Windows、Mac OS 和 Linux 版本，用户可根据系统自行下载解压。为方便使用，建议配置环境变量。安装包内含 example 文件夹，包含多个示例代码供参考。本文假设 PhantomJS 已安装并配置好环境变量。

二、使用

Hello World 示例

Hello， World！

新建一个文本文件，包含以下两行脚本：


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

将文件保存为 hello.js，然后在终端执行：

phantomjs hello.js

输出结果为：Hello, world!

第一行代码在终端打印字符串，第二行 phantom.exit 用于退出运行。在此脚本中调用 phantom.exit 至关重要，否则 PhantomJS 进程将不会停止。

脚本参数传递

脚本参数 – Script Arguments

PhantomJS 如何传递参数？示例如下：

代码如下:

phantomjs examples/arguments.js foo bar baz

其中的 foo, bar, baz 为传递的参数，获取方式如下：


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

它将输出：

0: foo 1: bar 2: baz

页面加载与截屏

页面加载 – Page Loading

通过创建网页对象，可以加载、分析和渲染网页。

以下脚本展示了页面对象的最简单用法，加载 example.com 并将其保存为图片 example.png。


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

利用此特性，PhantomJS 可用于网页截屏，截取网页、SVG 等内容为图片或 PDF，功能强大。

接下来的 loadspeed.js 脚本加载指定 URL（注意包含 http 协议）并计量加载时间。


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

在命令行运行该脚本：

phantomjs loadspeed.js http://www.google.com 输出示例如下：

Loading http://www.google.com Loading time 719 msec

代码评估与 DOM 操作

代码运算 – Code Evaluation

要在网页上下文中执行 JavaScript 或 CoffeeScript，使用 evaluate() 方法。代码在“沙箱”中运行，无法访问页面上下文之外的 JavaScript 对象和变量。evaluate() 返回的对象仅限于简单对象，不能包含方法或闭包。

以下示例显示网页标题：


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

默认情况下，来自网页及 evaluate() 内部代码的控制台信息不会显示。要重写此行为，使用 onConsoleMessage 回调函数，前例可改写为：


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操作 – DOM Manipulation

由于脚本仿佛在 Web 浏览器中运行，标准 DOM 脚本和 CSS 选择器均能正常工作。这使得 PhantomJS 非常适合支持各种页面自动化任务。

以下 useragent.js 脚本读取 id 为 myagent 元素的 textContent 属性：


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

上述示例还提供了一种自定义 user agent 的方法。

使用 JQuery 及其他类库：


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

网络请求监控

网络请求及响应 – Network Requests and Responses

当从远程服务器请求资源时，可通过 onResourceRequested 和 onResourceReceived 回调方法追踪请求和响应。示例 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);

获取关于将该特性用于 HAR 输出及基于 YSlow 的性能分析的更多信息，请参阅网络监控页面。

作者最新文章

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

JavaScript新手常犯的编码错误与最佳实践指南

2026-11-04 22:12:38