PhantomJS 和 Google Chrome/Firefox 的 HTML 输出不同

Question

我已经调试了很长时间，这让我完全困惑。我需要将广告保存到我的计算机以进行工作项目。这是我从 CNN.com 获得的示例广告：

http://ads.cnn.com/html.ng/site=cnn&cnn_pagetype=main&cnn_position=300x250_rgt&cnn_rollup=homepage&page.allowcompete=no&params.styles=fs&Params.User.UserID=5372450203c5be0a3c695e599b05d821&transactionID=13999976982075532128681984&tile=2897967999935&domId=6f4501668a5e9d58&kxid=&kxseg=

当我在 Google Chrome 和 Firefox 中访问此链接时，我看到了一个广告（如果链接停止工作，只需访问 CNN.com 并获取其中一个广告的 iframe URL）。我开发了一个 PhantomJS 脚本，它将保存屏幕截图和任何页面的 HTML。它适用于任何网站，但似乎不适用于这些广告。屏幕截图为空白，HTML 包含一个跟踪像素（用于跟踪广告的 1x1 透明 gif）。我认为它会给我在普通浏览器中看到的内容。

我唯一能想到的是 AJAX 调用以某种方式弄乱了 PhantomJS，所以我硬编码了延迟，但得到了相同的结果。

这是重现我的问题的最基本的测试代码：

var fs = require('fs');
var page = require('webpage').create();
var url = phantom.args[0];

page.open(url, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    }
    else {
        // Output Results Immediately
        var html = page.evaluate(function () {
            return document.getElementsByTagName('html')[0].innerHTML;
        });
        fs.write("HtmlBeforeTimeout.htm", html, 'w');
        page.render('RenderBeforeTimeout.png');

        // Output Results After Delay (for AJAX)
        window.setTimeout(function () {
            var html = page.evaluate(function () {
                return document.getElementsByTagName('html')[0].innerHTML;
            });
            fs.write("HtmlAfterTimeout.htm", html, 'w');
            page.render('RenderAfterTimeout.png');
            phantom.exit();
        }, 9000); // 9 Second Delay 
    }
});

您可以在终端中使用此命令运行此代码：

phantomjs getHtml.js 'http://www.google.com/'

上述命令运行良好。当您将 Google URL 替换为广告 URL（如本文顶部的那个）时，会得到我所解释的意外结果。

非常感谢您的帮助！这是我在这里发布的第一个问题，因为我几乎总能通过搜索 Stack Overflow 找到答案。然而，这一个让我完全难住了！ :)

编辑：我在 Ubuntu 14.04 (Trusty Tahr) 上运行 PhantomJS 1.9.7

编辑：好的，我已经研究了一段时间，我认为这与 cookie 有关。如果我清除所有历史记录并在浏览器中查看链接，它也会出现空白。如果我然后刷新页面，它显示正常。如果我在新选项卡中打开它，它也显示得很好。唯一没有的情况是我在清除我的 cookie 后尝试直接查看它。

编辑：我尝试在 PhantomJS 中加载链接两次而不退出（在调用 phantom.exit() 之前在我的脚本中手动请求两次）。它不起作用。在 PhantomJS 文档中，它说默认情况下启用 cookie jar。有任何想法吗？ :)

Answer 1

您应该尝试使用 onLoadFinished 回调而不是在 page.open 中检查状态。像这样的东西应该可以工作：

var fs = require('fs');
var page = require('webpage').create();
var url = phantom.args[0];

page.open(url);

page.onLoadFinished = function()
{
    // Output Results Immediately
    var html = page.evaluate(function () {
        return document.getElementsByTagName('html')[0].innerHTML;
    });
    fs.write("HtmlBeforeTimeout.htm", html, 'w');
    page.render('RenderBeforeTimeout.png');

    // Output Results After Delay (for AJAX)
    window.setTimeout(function () {
        var html = page.evaluate(function () {
            return document.getElementsByTagName('html')[0].innerHTML;
        });
        fs.write("HtmlAfterTimeout.htm", html, 'w');
        page.render('RenderAfterTimeout.png');
        phantom.exit();
    }, 9000); // 9 Second Delay 
};

我在这里有一个答案，它遍历本地文件夹中的所有文件并保存结果页面的图像：Using Phantom JS to convert all HTML files in a folder to PNG 同样的原则也适用于远程 HTML 页面。

这是我从输出中得到的：
超时前：
http://i.stack.imgur.com/GmsH9.jpg

超时后：
http://i.stack.imgur.com/mo6Ax.jpg