javascript - PhantomJS 没有执行 JS

Question

我尝试使用 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 秒的超时，但这并没有改变什么。如果我在 page.render() 之前执行 console.log(page.content) 我会得到页面的完整 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() 输出...

Answer 1

请允许我礼貌地问一下，这个网站是谁制作的？我强烈建议不要以 100% 依赖 JavaScript 的方式构建站点。关闭 JavaScript 并“加载”该网站 ( www.fallswoodsmith.com ) 没有结果。压缩。虚无。 zilch。 </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

要解决该问题，您可以填充 Function.prototype.bind (PhantomJS 1.x 中缺少 as per this issue )在创建网页对象之后但在加载 URL 之前(即 onInitialized )。

结果:

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 版本

上面的例子已经过测试并适用于 PhantomJS 1.9.7。该脚本似乎也适用于 PhantomJS 1.9.8，但 1.9.8 有 this issue (Unsafe JavaScript attempt to access frame in 1.9.8)虽然已修复，但它不是任何版本的一部分，并会导致以下错误输出:

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.

视口(viewport)大小

默认情况下，呈现的图像将是整页屏幕截图。要修复视口(viewport)大小，您可以在脚本顶部重新添加以下内容:

page.viewportSize = {
    width: 1024,
    height: 768
};
page.clipRect = {
    top: 0,
    left: 0,
    width: 1024,
    height: 768
};

填充 .bind

在 MDN 上找到的 polyfill , 似乎没有一点修改就无法工作，但是，结合 underscore.js 源代码和 this answer结果如上。