PhantomJS - 示例
在本章中，我们将提供一些更实际的示例来帮助您了解 PhantomJS 的一些重要功能。
示例 1 - 查找页面速度
在此示例中，我们将使用 PhantomJS 查找任何给定页面 URL 的页面速度。
var page = require('webpage').create(),
system = require('system'),
t, address;
if (system.args.length === 1) {
console.log('Usage: loadspeed.js <some URL>');
phantom.exit(1);
} else {
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('Page title is ' + page.evaluate(function () {
return document.title;
}));
console.log('Loading time ' + t + ' msec');
}
phantom.exit();
});
}
上述程序生成以下输出。
命令 − phantomjs pagespeed.js http://www.google.com
Page title is Google Loading time 1396 msec
示例 2 - 向页面发送点击事件
在下面的示例中，我们将使用 PhantomJS 向页面发送 点击事件。
var page = require('webpage').create();
page.onConsoleMessage = function(str) {
console.log(str);
}
page.open('http://phantomjs.org/api/phantom/', function(status) {
page.render('beforeclick.png');
console.log(page.url);
var element = page.evaluate(function() {
return document.querySelector('img[src = "http://phantomjs.org/img/phantomjslogo.png"]');
});
page.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');
window.setTimeout(function () {
console.log(page.url);
page.render('afterclick.png');
phantom.exit();
}, 5000);
console.log('element is ' + element);
});
上述程序生成以下输出。
http://phantomjs.org/api/phantom/ element is [object Object] http://phantomjs.org/
我们的程序将在 bin 文件夹中创建以下两个 png 图像。这两幅图像显示了上述程序执行前后的差异。
示例 3 - 提交表单
以下示例显示如何使用 PhantomJS 提交表单。
var wpage = require('webpage').create();
wpage.open("http://localhost/tasks/submitform.html", function(status) {
console.log(status);
wpage.uploadFile('input[name = fileToUpload]', 'output.png');
wpage.render("sform.png");
var element = wpage.evaluate(function() {
return document.querySelector('input[type = "submit"]');
// 使用 queryselector 获取提交按钮的详细信息。
});
wpage.sendEvent('click', element.offsetLeft, element.offsetTop, 'left');
// sendevent 用于发送点击事件，并给出左侧和顶部
position of the submit button.
window.setTimeout(function () {
console.log(wpage.url);
wpage.render("submit.png"); // 截图保存在submit.png中
phantom.exit();
}, 5000);
console.log('element is ' + element);
});
submitform.html
以下代码显示如何使用 submitform.html 文件。
<html>
<head>
<title>Window 2</title>
</head>
<body>
<form action = "submitform.php" method = "post" enctype = "multipart/form-data"
id = "form1">
<input type = "file" name = "fileToUpload" id = "fileToUpload">
<input type = "submit" value = "Upload Image" name = "submit">
</form>
</body>
</html>
表单提交后，将转到 submitform.php。
submitform.php
submitform.php 仅打印文件的详细信息。
<?php print_r($_FILES); ?>
上述程序生成以下输出。
Success element is [object Object] http://localhost/tasks/submitform.php
图片
以下是文件上传和表单提交的图片。
