javascript - 我可以使用 phantomjs/casperjs 获取原始页面源代码(与当前 DOM 相比)吗？

Question

我正在尝试获取特定网页的原始来源。

该页面在加载后立即执行一些修改 DOM 的脚本。我想在任何脚本或用户更改文档中的任何对象之前获取源代码。

使用 Chrome 或 Firefox(可能还有大多数浏览器)，我可以查看 DOM(调试实用程序 F12)或查看原始源代码(右键单击，查看源代码)。后者是我想要完成的。

是否可以用 phantomjs/casperjs 做到这一点？

在进入页面之前，我必须登录。这在 casperjs 上运行良好。如果我浏览到该页面并呈现结果，我就知道我在正确的页面上。

casper.thenOpen('http://'+customUrl, function(response) {
    this.page.render('example.png'); // *** Renders correct page (current DOM) ***
    console.log(this.page.content); // *** Gets current DOM ***
    casper.download('view-source:'+customUrl, 'b.html', 'GET'); // *** Blank page ***
    console.log(this.getHTML()); // *** Gets current DOM ***
    this.debugPage(); // *** Gets current DOM ***
    utils.dump(response); // *** No BODY ***
    casper.download('http://'+customUrl, 'a.html', 'GET');  // *** Not logged in ?! ***
});

我试过 this.download(url, 'a.html') 但它似乎没有共享相同的上下文，因为它返回 HTML，就好像我没有登录一样，即使如果我使用 cookies casperjs test.casper.js --cookies-file=cookies.txt 运行。

我认为我应该继续分析这个选项。

---

我也尝试过 casper.open('view-source:url') 而不是 casper.open('http://url') 但它似乎它无法识别该网址，因为我只得到一个空白页面。

我已经使用我拥有的实用程序查看了从服务器获得的原始 HTTP 响应，并且此消息的正文(HTML)是我所需要的，但是当页面在浏览器中加载时，DOM 已经被修改.

我试过:

casper.thenOpen('http://'+url, function(response) {
    ...
}

但是 response 对象只包含标题和一些其他信息，而不包含正文。

---

我还尝试了 onResourceRequested 事件。

想法是中止特定网页(引用者)所需的任何资源的下载。

onResourceRequested: function(casperObj, requestData, networkRequest) {
for (var i=0; i < requestData.headers.length; i++) {
    var obj = requestData.headers[i];
    if (obj.name === "Referer" && obj.value === 'http://'+customUrl) {
        networkRequest.abort();
        break;
    }
}

不幸的是，修改 DOM 的脚本最初似乎内嵌在主 HTML 页面中(或者这段代码没有按照我的意愿执行)。

---

¿有什么想法吗？

完整代码如下:

phantom.casperTest = true;
phantom.cookiesEnabled = true;

var utils = require('utils');
var casper = require('casper').create({
    clientScripts:  [],
    pageSettings: {
        loadImages:  false,
        loadPlugins: false,
        javascriptEnabled: true,
        webSecurityEnabled: false
    },
    logLevel: "error",
    verbose: true
});

casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X)');

casper.start('http://www.xxxxxxx.xxx/login');

casper.waitForSelector('input#login',
    function() {
        this.evaluate(function(customLogin, customPassword) {
            document.getElementById("login").value = customLogin;
            document.getElementById("password").value = customPassword;
            document.getElementById("button").click();
        }, {
            "customLogin": customLogin,
            "customPassword": customPassword
        });
    },
    function() {
        console.log('Can't login.');
    },
    15000
);

casper.waitForSelector('div#home',
    function() {
        console.log('Login successfull.');
    },
    function() {
        console.log('Login failed.');
    },
    15000
);

casper.thenOpen('http://'+customUrl, function(response) {
    this.page.render('example.png'); // *** Renders correct page (current DOM) ***
    console.log(this.page.content); // *** Gets current DOM ***
    casper.download('view-source:'+customUrl, 'b.html', 'GET'); // *** Blank page ***
    console.log(this.getHTML()); // *** Gets current DOM ***
    this.debugPage(); // *** Gets current DOM ***
    utils.dump(response); // *** No BODY ***
    casper.download('http://'+customUrl, 'a.html', 'GET');  // *** Not logged in ?! ***
});

Answer 1

嗯，你尝试过使用一些事件吗？例如:

casper.on('load.started', function(resource) {
    casper.echo(casper.getPageContent());
});

我觉得不行，试试吧。

问题是:您不能在正常的 casperJS 步骤中执行此操作，因为页面上的脚本已经执行。如果我们可以绑定(bind) on-DOM-Ready 事件，或者有一个像这样的特定 casper 事件，它就可以工作。问题:必须加载页面才能将一些 js 从 Casper 发送到 DOM 环境。所以绑定(bind) onready 是不可能的(我不知道如何)。我认为使用 phantom 我们可以在加载事件后抓取数据，所以只有在页面呈现时。

因此，如果无法通过事件破解它并且可能会有一些延迟，您唯一的解决方案是阻止修改您的 DOM 的脚本。

仍然有 phantomJS 选项，你可以使用它:在 casper 中:

casper.pageSettings.javascriptEnabled = false;

问题是您需要启用 js 才能取回数据，所以它无法工作...:p 是的，没用的评论! :)

否则，您必须阻止使用事件修改 DOM 的所需资源/脚本。

或者您可以使用 resource.received 事件在特定资源修改 DOM 出现之前抓取所需的数据。

事实上，我认为这是不可能的，因为如果您创建一个步骤，在特定资源出现之前从页面取回一些数据，那么在执行您的步骤时，资源将加载.当您的步骤正在抓取数据时，有必要卡住以下资源。

虽然不知道该怎么做，但这些事件可以帮助你:

casper.on('resource.requested', function(request) {
    console.log(" request " + request.url);
});

casper.on('resource.received', function(resource) {
    console.log(resource.url);
});

casper.on('resource.error',function (request) {
    this.echo('[res : id and url + error description] <-- ' + request.id + ' ' + request.url + ' ' + request.errorString);
});

另见 How do you Disable css in CasperJS? .可行的解决方案:您识别脚本并阻止它们。但如果你需要它们，我不知道，这是一个很好的问题。也许我们可以推迟特定脚本的执行。我认为 Casper 和 phantom 不会轻易允许这样做。唯一有用的选项是 abort()，给我们这个选项:timeout("time -> ms")!

onResourceRequested

这里有一个类似的问题:Injecting script before other