mirror of
https://github.com/encounter/phantomjs.git
synced 2026-03-30 11:35:11 -07:00
Ariya Hidayat
280 lines
9.2 KiB
HTML
Executable File
280 lines
9.2 KiB
HTML
Executable File
<!doctype html>
|
|
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>PhantomJS 1.2 Release Notes</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="screen.min.css">
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-21665893-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
<style>
|
|
#description p {
|
|
line-height: 125%;
|
|
text-align: left;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#description h2 {
|
|
text-align: left;
|
|
margin: 0.8em 0;
|
|
font-size: 150%;
|
|
}
|
|
|
|
#description pre {
|
|
margin-left: 2em;
|
|
}
|
|
|
|
#description ul {
|
|
line-height: 125%;
|
|
list-style-type: disc;
|
|
margin-left: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#description li {
|
|
margin-left: 1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="intro">
|
|
<div id="header" class="container_12">
|
|
<a href="index.html" class="grid_4 alpha"><img src="images/phantomjs-logo.png" alt="PhantomJS" id="logo" width="240" height="80"></a>
|
|
<ul id="nav" class="grid_8 omega">
|
|
<li><a href="https://github.com/ariya/phantomjs">Source Code</a></li>
|
|
<li><a href="https://github.com/ariya/phantomjs/wiki">Documentation</a></li>
|
|
<li><a href="https://github.com/ariya/phantomjs/wiki/API-Reference">API</a></li>
|
|
<li><a href="https://github.com/ariya/phantomjs/wiki/Examples">Examples</a></li>
|
|
<li><a href="faq.html">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="introduction" class="container_12">
|
|
<div class="grid_7 alpha">
|
|
<h1>PhantomJS 1.2 Release Notes</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="description" class="container_12">
|
|
|
|
<div class="grid_10">
|
|
|
|
<p>PhantomJS 1.2, <em><a href="release-names.html">Birds of Paradise</a></em>, was released on June 21, 2011. It is a major update, it introduces a whole set of new API. It is not compatible with the previous version. For porting existing scripts into the new API, follow the description below.</p>
|
|
|
|
<p><strong>WebPage object</strong></p>
|
|
|
|
<p>In order to improve the security aspect (see issue 41), PhantomJS scripts will not run in the context of web page execution. This means, there is no way for malicious scripts to detect the presence of 'phantom' object and exploits its API.
|
|
|
|
<p>The "sandboxing" is achieved via a new WebPage object. It is an encapsulation of a web page. A specific URL can be loaded using its open() function. A typical usage is:</p>
|
|
|
|
<pre>
|
|
var page = new WebPage();
|
|
|
|
page.open(url, function (status) {
|
|
// do something
|
|
});
|
|
</pre>
|
|
|
|
<p>The callback in the open() is executed when the page loading is completed, with status equals to "success" if there is no error and "failed" is error has occurred.</p>
|
|
|
|
<p>The above construct is a convenient version of the following:</p>
|
|
|
|
<pre>
|
|
var page = new WebPage();
|
|
|
|
page.onLoadFinished = function (status) {
|
|
// do something
|
|
};
|
|
|
|
page.open(url);
|
|
</pre>
|
|
|
|
<p>Beside onLoadFinished, there is also onLoadStarted which is invoked when page loading starts for the first time:</p>
|
|
|
|
<pre>
|
|
var page = new WebPage();
|
|
|
|
page.onLoadStarted = function () {
|
|
console.log('Start loading...');
|
|
};
|
|
|
|
page.onLoadFinished = function (status) {
|
|
console.log('Loading finished.');
|
|
};
|
|
|
|
page.open(url);
|
|
</pre>
|
|
|
|
<p><strong>Page settings</strong></p>
|
|
|
|
<p>The behavior of the web page can be set via its settings object, with the following properties:</p>
|
|
|
|
<ul>
|
|
<li>loadImages defines whether to load inline images or not (default to true)
|
|
<li>loadPlugins defines whether to load plugins (Flash, Silverlight, ...) or not (default to false)
|
|
<li>userAgent defines the user agent string passed to the server
|
|
</ul>
|
|
|
|
<p>As an example, here is how to change the user agent:</p>
|
|
|
|
<pre>
|
|
var page = new WebPage();
|
|
|
|
page.settings.userAgent = 'Dragonless Phantom';
|
|
|
|
page.open(url, function (status) {
|
|
// do something
|
|
});
|
|
</pre>
|
|
|
|
<p><strong>Rasterization</strong></p>
|
|
|
|
<p>A web page can be rasterized to an image or a PDF file using render() function.</p>
|
|
|
|
<p>This rasterize.js is all it takes to capture a web site.</p>
|
|
|
|
<pre>
|
|
var page = new WebPage(),
|
|
address, output, size;
|
|
|
|
if (phantom.args.length < 2 || phantom.args.length > 3) {
|
|
console.log('Usage: rasterize.js URL filename');
|
|
phantom.exit();
|
|
} else {
|
|
address = phantom.args[0];
|
|
output = phantom.args[1];
|
|
page.viewportSize = { width: 600, height: 600 };
|
|
page.open(address, function (status) {
|
|
if (status !== 'success') {
|
|
console.log('Unable to load the address!');
|
|
} else {
|
|
window.setTimeout(function () {
|
|
page.render(output);
|
|
phantom.exit();
|
|
}, 200);
|
|
}
|
|
});
|
|
}
|
|
</pre>
|
|
|
|
<p><strong>Network traffic</strong></p>
|
|
|
|
<p>All the resource requests and responses can be sniffed using the onResourceRequested and onResourceReceived. An example to dump everything is:</p>
|
|
|
|
<pre>
|
|
var page = new WebPage();
|
|
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);
|
|
</pre>
|
|
|
|
<p>The included examples/netsniff.js shows how to capture and process all the resource requests and responses and export the result in <a href="http://groups.google.com/group/http-archive-specification?hl=en">HAR format</a>.</p>
|
|
|
|
<p>The following shows the waterfall diagram obtained from BBC website:</p>
|
|
|
|
<p><img src="https://lh6.googleusercontent.com/-xoooH5EB6EE/TgnyJ3r9sRI/AAAAAAAAB98/wYJ_VoWED34/s640/bbc-har.png"/></p>
|
|
|
|
<p><strong>JavaScript evaluation</strong></p>
|
|
|
|
<p>To evaluate JavaScript code in the context of the web page, use evaluate() function. The execution is sandboxed, there is no way for the code to access any JavaScript objects and variables outside its own page context. An object can be returned from evaluate(), however it is limited to simple objects and can't contain functions or closures.</p>
|
|
|
|
<p>Here is an example to show the title of a web page:</p>
|
|
|
|
<pre>
|
|
var page = new WebPage();
|
|
page.open(url, function (status) {
|
|
var title = page.evaluate(function () {
|
|
return document.title;
|
|
});
|
|
console.log('Page title is ' + title);
|
|
});
|
|
</pre>
|
|
|
|
<p>Any console message from a web page, including from the code inside evaluate(), will not be displayed by default. To override this behavior, use the onConsoleMessage callback. The previous example can be rewritten to:</p>
|
|
|
|
<pre>
|
|
var page = new WebPage();
|
|
page.onConsoleMessage = function (msg) {
|
|
console.log('Page title is ' + msg);
|
|
};
|
|
page.open(url, function (status) {
|
|
page.evaluate(function () {
|
|
console.log(document.title);
|
|
});
|
|
});
|
|
</pre>
|
|
|
|
<p>To inject external code, use injectJs function passing the file name containing the code to be loaded. If the file can not be found in the current directory, it will be searched in the path specified in the libraryPath property. Both phantom and WebPage object have injectJs function.</p>
|
|
|
|
<p>To load external JavaScript library, includeJs is very useful. It behaves like the well-known dynamic script loading technique. An example:</p>
|
|
|
|
<pre>
|
|
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
|
|
// jQuery is loaded, now manipulate the DOM
|
|
});
|
|
</pre>
|
|
|
|
<p><strong>Bug fixes</strong></p>
|
|
|
|
<ul>
|
|
<li>Fixed rendering a very large web page (issue 54)
|
|
<li>Fixed reporting of CoffeeScript compile error (issue 125)
|
|
</ul>
|
|
|
|
<p><strong>New features</strong></p>
|
|
|
|
<ul>
|
|
<li>Added callback for console message (issue 12)
|
|
<li>Improved security model via WebPage object (issue 41)
|
|
<li>Added support for POST, HEAD, PUT, and DELETE (issue 88)
|
|
<li>Scripts filename is now passed as phantom.scriptName
|
|
<li>Added callback to capture resource requests and responses (issue 2)
|
|
<li>Added the ability to load external JavaScript (issue 32)
|
|
</ul>
|
|
|
|
<p><strong>Examples</strong></p>
|
|
|
|
<ul>
|
|
<li>Ported examples to use WebPage object
|
|
<li>Added a new example to upload an image to imagebin.org
|
|
<li>Added a new example to show HTTP POST feature
|
|
<li>Added a new example to sniff network traffic and save it in HAR format
|
|
</ul>
|
|
|
|
|
|
<p>Back to <a href="releases.html">all releases</a>.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<div id="footer-content" class="container_12">
|
|
<p>
|
|
© Copyright 2010-2012 <a href="http://twitter.com/AriyaHidayat">Ariya Hidayat</a> — Website design by <a href="http://svay.com/">Maurice Svay</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|