Skip to content

Instantly share code, notes, and snippets.

@phpdude
Last active May 17, 2024 07:39
Show Gist options
  • Save phpdude/47d4630067e8f46e054c to your computer and use it in GitHub Desktop.
Save phpdude/47d4630067e8f46e054c to your computer and use it in GitHub Desktop.
PhantomJS: hellper for writing scripts waiting full page load (DOMContentLoaded event)
var system = require("system");
var url = system.args[1];
require('./phantom-full-load')(phantom, url, function (page, logs) {
logs.forEach(function (i) {
console.log('> ' + i);
});
result = page.evaluate(function () {
return $('body *').attr('class');
});
console.log(result);
}, function (error) {
console.log(error);
});
// This example shows how to render pages that perform AJAX calls
// upon page load.
//
// Instead of waiting a fixed amount of time before doing the render,
// we are keeping track of every resource that is loaded.
//
// Once all resources are loaded, we wait a small amount of time
// (resourceWait) in case these resources load other resources.
//
// The page is rendered after a maximum amount of time (maxRenderTime)
// or if no new resources are loaded.
// from https://gist.github.com/cjoudrey/1341747
var jquery = './vendor/jquery.min.js';
var maxRenderWait = 30000;
var resourceTimeout = 5000;
module.exports = function (phantom, url, onOk, onError) {
var page = require('webpage').create(), forcedRenderTimeout;
page.viewportSize = {width: 1280, height: 1024};
page.settings.resourceTimeout = resourceTimeout;
var consoleLogs = [];
function onLoad() {
clearTimeout(forcedRenderTimeout);
onOk(page, consoleLogs);
phantom.exit();
}
page.onConsoleMessage = function (msg) {
consoleLogs.push(JSON.stringify(msg));
};
page.onCallback = function (data) {
onLoad();
};
page.onInitialized = function () {
page.injectJs(jquery) || (console.log("Unable to inject jQuery") && phantom.exit());
page.evaluate(function () {
$(function () {
window.callPhantom();
});
});
page.evaluate(function () {
var isFunction = function (o) {
return typeof o == 'function';
};
var bind,
slice = [].slice,
proto = Function.prototype,
featureMap;
featureMap = {
'function-bind': 'bind'
};
function has(feature) {
var prop = featureMap[feature];
return isFunction(proto[prop]);
}
// check for missing features
if (!has('function-bind')) {
// adapted from Mozilla Developer Network example at
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
bind = function bind(obj) {
var args = slice.call(arguments, 1),
self = this,
nop = function () {
},
bound = function () {
return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
};
nop.prototype = this.prototype || {}; // Firefox cries sometimes if prototype is undefined
bound.prototype = new nop();
return bound;
};
proto.bind = bind;
}
});
};
phantom.onError = page.onError = function (err) {
consoleLogs.push(err);
};
page.open(url, function (status) {
if (status !== "success") {
onError(new Error('Unable to load url'));
} else {
forcedRenderTimeout = setTimeout(onLoad, maxRenderWait);
}
});
};
@phpdude
Copy link
Author

phpdude commented Oct 9, 2015

Output of example script

root # phantomjs example.js http://vk.com
> [0.019]  Real time offset: 0, minDt: 0, final time offset: 0
> [0.02]  dom started
fixed

@phpdude
Copy link
Author

phpdude commented Oct 9, 2015

Helper can be used as starting point for new PhantomJS scripts.

This helper makes all dirty job:

  1. Wait for full page load
  2. Embed jquery into page
  3. Callback to your function when #1 and #2 are ready!

PR are welcome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment