Skip to content
PhantomJS + Google Maps Directions API
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
phantomjs
README.md
example.js
googlemap.html

README.md

###PhantomJS + Google Maps Directions API 方案截图 Google Maps

####PhantomJS基础及示例

######概述

  • PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

  • PhantomJS是一个无界面的webkit内核浏览器,你可以把它当作一个没有界面的Safari。

######安装

  • 目前PhantomJS的最新版本的2.0。

######windows

  • 直接下载phantomjs-2.0.0-windows.zip,并解压,将bin文件夹中的可执行文件phantomjs.exe的路径添加到环境变量后(可能需要重启机器才能生效),就可以在命令行环境(cmd或cygwin)中使用phantomjs命令执行js文件了。

######Linux

  • 安装二进制文件包

  • 可以在Bitbucket下载已经编译好的二进制文件安装包,不过目前Linux提供到PhantomJS 1.9.8的安装包,最新的PhantomJS 2.0还没有发布。 安装方式:

  • 下载phantomjs-1.9.8-linux-x86_64.tar.bz2

  • 进入安装目录,解压二进制文件

  • cd /usr/local

  • tar zxvf phantomjs-1.9.8-linux-x86_64.tar.bz2

  • 创建软链接mysql指向解压出来的文件夹,或将解压出来的文件夹重命名为phantomjs:

  • ln -sf phantomjs-1.9.8-linux-x86_64/bin/phantomjs phantomjs

######编译源码的方式

  • 由于WebKit模块中有数千个文件,因此由源码编译PhantomJS会花费很长的时间,文档上说,开四个并行的进程进行编译工作,需要超过30分钟的时间,因此官方文档推荐直接下载和安装二进制文件。 具体的安装方法,这里就不再赘述,大家可以到官方文档上查看。

######是否安装成功

  • 我们可以使用下面的命令来查看PhantomJS是否安装成功:

  • phantomjs -v

  • 命令运行phantomjs xxx.js即可执行一个PhantomJS程序。

######webpage模块

  • webpage是PhantomJS的核心模块,你可以通过以下方式,获得一个webpage模块的实例:

     var webPage = require("webpage"),
     page = webPage.create();
     open()
  • 打开一个url链接,并加载对应的页面,一旦页面加载完成,就会触发回调,你也可以使用page.onLoadFinished方法来监听页面是否加载完成。下面,我们来用open()方法打开Google maps:

     var page = require("webpage").create;
    
     page.open("https://www.google.com/maps", function(status) {
     	if(status !== "success") {
         console.log("open fail!");
     	}
     	phantom.exit();
     });
  • 上面的代码中,open()方法接受了两个参数。第一个参数是要打开网页的url(要记得加协议头哦!),默认使用GET方法打开,第二个参数是回调参数,网页加载完成后该函数将会执行,它的参数status表示网页是否打开成功,打开成功就是success,否则就是fail。要注意的是,只要收到服务器返回的结果,status参数就是success,即使服务器返回的是404或500错误。 我们也可以使用其他的http方法打开页面。

     var webPage = require("webpage");
     var page = webPage.create();
     var postBody = "user=username&password=password";
    
     page.open("http://www.google.com/", "POST", postBody, function(status) {
       console.log("Status: " + status);
       // Do other things here...
     });
  • 上面的代码是官方文档的事例,使用POST方法向服务器发送数据。open方法的第二个参数用来指定HTTP方法,第三个参数用来指定该方法所要使用的数据。 从PhantomJS 1.9开始,我们还可以使用json对象来对http请求进行更详细的配置。

     var webPage = require('webpage');
     var page = webPage.create();
     var settings = {
       operation: "POST",
       encoding: "utf8",
       headers: {
         "Content-Type": "application/json"
       },
       data: JSON.stringify({
         some: "data",
         another: ["custom", "data"]
       })
     };
    
     page.open('http://your.custom.api', settings, function(status) {
       console.log('Status: ' + status);
       // Do other things here...
     });
     evaluate()
  • 在打开一个网页后,我们往往有对其进行操作的需求,例如模拟点击登陆按钮、获取某个DOM元素等等,也就是需要在页面中执行javascript代码,这时候我们就需要使用到evaluate()方法。

     // 获取打开页面的title
     var page = require('webpage').create();
    
     page.open(url, function(status) {
       var title = page.evaluate(function() {
         return document.title;
       });
       console.log('Page title is ' + title);
       phantom.exit();
     });
  • 由于因为evaluate()方法相当于一个沙盒,在其中是无法访问evaluate()之外的变量的。那如何将我想要获取的dom元素的id传进evaluate呢? 从PhantomJS 1.6开始,我们可以将外部变量以如下的方式传给evaluate内部,需要注意的是,能传入evaluate方法内部的参数只能是简单的基本类型,例如数值、字符串、json对象等能被JSON序列化的类型,而无法接受更复杂的对象,它的返回值也同样如此。

     page.open('https://item.taobao.com/item.htm?id=520115087331', function(status) 	{
       var domId = "J_SellCounter"
       var sellCounter = page.evaluate(function(id) {
         return document.getElementById(id).innerText;
       }, domId);
    
       console.log(sellCounter);
       phantom.exit();
    
     });
  • 由于open()方法打开的网页内部的console语句,和evaluate()方法中的console语句都不会执行,给我们开发调试带来了不便。这时可以采用onConsoleMessage回调函数,来打印出上面两种情况中的console语句中的信息:

     var webPage = require('webpage');
     var page = webPage.create();
    
     page.onConsoleMessage = function(msg, lineNum, soureId) {
       console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + 	sourceId + '")');
     };
  • 其中msg是需要打印的信息,lineNum和sourceId是console.log在文件中的行号以及这个文件对应的标识id。

  • includeJs()

  • 可以使用includeJs()方法加载外部脚本,例如jquery。

     var webPage = require('webpage');
     var page = webPage.create();
    
     page.open('http://www.example.com', function(status) {
         if(status !== "success") {
             console.log("open fail!");
         }
         page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/	jquery.min.js', function() {
           page.evaluate(function() {
                 // jQuery is loaded, now manipulate the DOM
               var $loginForm = $('form#login');
               $loginForm.find('input[name="username"]').value('phantomjs');
               $loginForm.find('input[name="password"]').value('c45p3r');
               $('#loginBtn').click();
           });
           phantom.exit();
         });
     })
  • 注意,由于includeJs是异步加载脚本,所以phantom.exit()需要放在page.includeJs()的回调函数中,否则phantomjs进程会过早退出。

  • render()

  • render()可以将打开的网页截图并保存成本地图片,可以将指定的图片文件名作为参数传入,render方法可以根据文件名的后缀将图片保存成对应的格式。目前支持PNG、GIF、JPEG、PDF四种图片格式。

     var webPage = require('webpage');
     var page = webPage.create();
    
     page.viewportSize = { width: 1920, height: 1080 };
     page.open("http://www.google.com", function start(status) {
       page.render('google.jpeg', {format: 'jpeg', quality: '100'});
       phantom.exit();
     });
  • 该方法的第一个参数是保存的文件名,第二个可选参数是一个JSON对象,format指定图片格式,quality指定0-100区间内的图片质量,必须是整数。

You can’t perform that action at this time.