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網址（如本文頂部的網址）時，會給我帶來我所解釋的意外結果。

非常感謝你的幫助！ 這是我在此發布的第一個問題，因為我幾乎總是可以通過搜索Stack Overflow找到答案。 但是，這讓我完全難過！ :)

編輯：我在Ubuntu 14.04（Trusty Tahr）上運行PhantomJS 1.9.7

編輯：好的，我已經研究了一段時間了，我認為它與Cookie有關。 如果我清除所有歷史記錄並在瀏覽器中查看鏈接，則該鏈接也將變為空白。 如果我隨后刷新頁面，它會顯示正常。 如果在新標簽頁中將其打開，它也會顯示正常。 唯一的例外是我在清除Cookie后嘗試直接查看它。

編輯：我嘗試在PhantomJS中加載鏈接兩次而不退出（在調用phantom.exit（）之前在腳本中手動請求兩次）。 沒用 在PhantomJS文檔中，它說cookie罐是默認啟用的。 有任何想法嗎？ :)

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 
};

我在這里有一個答案，可以循環遍歷本地文件夾中的所有文件並保存所得頁面的圖像： 使用Phantom JS將文件夾中的所有HTML文件轉換為PNG相同的原理適用於遠程HTML頁面。

這是我從輸出中得到的：
超時之前：
http://i.stack.imgur.com/GmsH9.jpg

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