我尝试使用PhantomJS制作www.fallswoodsmith.com的屏幕截图。我的代码是：
var page = require('webpage').create();
page.viewportSize = { width: 1024, height: 768 };
page.clipRect = {top: 0, left: 0, width: 1024, height: 768};
page.open('http://www.fallswoodsmith.com', function () {
page.render('cache/www.fallswoodsmith.com123567266_1024_768.png', {format: 'png', quality: '10'});
phantom.exit();
});
这个页面只有JS，所以没有JS就没有内容。出于某种原因，PhantomJS没有执行这个JS。我还尝试为page.render()和phantom.exit()设置5秒的超时时间，但这并没有改变某些内容。如果我在console.log(page.content)之前执行page.render()我获得了页面的完整HTML - 只是没有JS的更改。
为什么PhantomJS不执行页面的JS？
更新1： 我添加了以下调试内容：
page.onConsoleMessage = function(msg, lineNum, sourceId) {
console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
});
}
console.error(msgStack.join('\n'));
};
page.onResourceError = function(resourceError) {
console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
};
page.onResourceTimeout = function(request) {
console.log('Response (#' + request.id + '): ' + JSON.stringify(request));
};
我的控制台中没有console.log（）输出...
答案 0 :(得分：8)
如果我礼貌地问，是谁制作了那个网站？我非常建议不要以这样的方式构建网站，使它们100％依赖于JavaScript。关闭JavaScript并“加载”该网站（www.fallswoodsmith.com）不会产生任何结果。压缩。缥缈。小人物。 </rant>
运行上面的截图脚本，我得到以下输出：
TypeError: 'undefined' is not a function (evaluating 'joinURL.bind(null, staticServerUrl)')
http://static.parastorage.com/services/santa-versions/1.150.0/main-r.js:353 in wixRenderSite
要解决此问题，您可以在创建网页对象之后但在加载网址之前（即{{3）填充Function.prototype.bind（PhantomJS 1.x，as per this issue中缺少） }}）。
结果：
var page = require('webpage').create();
page.onInitialized = function () {
page.evaluate(function () {
var isFunction = function (obj) {
return typeof obj == 'function' || false;
};
var slice = Array.prototype.slice;
Function.prototype.bind = function bind(obj) {
var args = slice.call(arguments, 1);
var self = this;
var F = function () {};
var bounded = function() {
return self.apply(
this instanceof F ? this : (obj || {}),
args.concat(slice.call(arguments))
);
};
F.prototype = this.prototype || {};
bounded.prototype = new F();
return bounded;
};
});
};
page.open('http://www.fallswoodsmith.com', function () {
setTimeout(function screenshot() {
page.render('WORKS.png', {
format: 'png',
quality: '10',
});
phantom.exit();
}, 10 * 1000);
});
为什么在拍摄截图前等待10秒？好吧，由于该站点完全依赖于JS，因此没有明显的事件（我能想到）等待，这表明页面正在加载。你的旅费可能会改变。根据需要增加或减少超时。
注意：上面的输出文件名为WORKS.png。
以上示例已经过测试，可与PhantomJS 1.9.7配合使用。该脚本似乎也适用于PhantomJS 1.9.8，但1.9.8具有onInitialized，虽然已修复，但它不是任何版本的一部分，并导致以下错误查看输出：
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://28011634.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://28011634.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://28011634.js. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file://28011634.js. Domains, protocols and ports must match.
默认情况下，渲染的图片将是整页截图。要修复视口大小，可以在脚本顶部添加以下内容：
page.viewportSize = {
width: 1024,
height: 768
};
page.clipRect = {
top: 0,
left: 0,
width: 1024,
height: 768
};
.bind 在this issue (Unsafe JavaScript attempt to access frame in 1.9.8)上找到的polyfill似乎没有经过一些修改就可以正常工作，但结合了underscore.js源代码和MDN导致了上述内容。
答案 1 :(得分：0)
从版本2.1开始，phantomjs将polyfill包含在发行版的javascript引擎中。试试他们的latest version。