你如何通过 phantomjs 访问页面的未更改源

Question

使用 phantomjs，可以访问修改后的 DOM、post-解析的副本。使用 cURL 调用，您可以访问预解析页面。在预解析的代码中，您可能会发现错误，这些错误已被浏览器更正。

您如何访问 post 呈现的更改和预呈现的内容以比较浏览器自动执行的修复？

最好的方法是对两个文件使用 DIFF 还是 phantomjs 保存内容的两个副本，原始形式和修改后的形式？我似乎无法找到正确的表达方式来通过 google 获得答案并在此处搜索：https://whosebug.com/search?q=[phantomjs]+save+unaltered+source 没有找到任何结果。

出于 bandwidth/efficiency 原因，我想避免再次调用同一页面。

Answer 1

在 PhantomJS 中无法直接访问未更改的源代码（在其他浏览器中称为查看源代码）。

您可以尝试从 PhantomJS 缓存中读取页面（当运行和 --disk-cache=true option 时），但有一个更简单的方法。您可以简单地发送一个 AJAX 请求来获取来源 "on the wire"，但是您需要自己处理重定向。

var page = require('webpage').create(),
    fs = require('fs');

function get(page, url) {
    return page.evaluate(function(url){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);
        xhr.send(null);
        return xhr.responseText;
    }, url);
}

var url = 'http://example.com';

page.open(url, function(){
    var co = get(page, url);
    fs.write("original.html", co);
    fs.write("rendered.html", page.content);
    phantom.exit();
});

你已经可以通过这个简单的脚本看到这两个文件是不同的，尽管不涉及 JavaScript。

您可能需要运行和 --web-security=false 选项。您可以直接访问 page.url:

，而不是将 url 传递给 get() 函数

function get(page, url) {
    url = url || page.url;
    return page.evaluate(function(url){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);
        xhr.send(null);
        return xhr.responseText;
    }, url);
}

你如何通过 phantomjs 访问页面的未更改源

How do you access the unaltered source of a page via phantomjs

javascript

diff

curl

phantomjs