如何在使用 phantomjs 抓取网页时获取 css 文件和 js 文件

Question

我正在做一个需要抓取网页的项目，所以我浏览了教程，我发现phantomJs将是它的最佳选择。 因为它允许我们获取 angularJs 站点和基于 ajax 的视图站点的 HTML 内容，并且我已经为它编写了代码并且工作正常， 但问题是我无法获取 css 和 js 文件，如果它只写入了文件的短路径。

如果受害者使用网站的完整URL，如下所示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

它工作正常，因为受害者正在使用我可以使用的 js 的完整 URL。但如果受害者正在使用网址

<script src="assets/js/jquery.min.js"></script>

那么这对我来说是一个问题，我无法获得我当前 HTML 内容的 css 和 js，所以就我所做的而言，我已经编写了一些幻影代码。我在下面发了帖子。

 var page = new WebPage()
    var fs = require('fs');
    page.onLoadFinished = function() {
      console.log("page load finished");
      page.render('export.png');
      fs.write('1.html', page.content, 'w');
      phantom.exit();
    };
    page.open("http://insttaorder.com/", function() {
      page.evaluate(function() {
      });
    });

我需要

的是，我需要本地计算机上的所有css和js文件，我已经在google，GitHub上搜索过，但没有得到任何特定的解决方案，

Answer 1

解决任务的策略是这样的：

• 在PhantomJS中打开页面
• 枚举指向 JS 和 CSS 资源的所有链接
• 全部下载

尽管 PhantomJS 可用于下载和保存文件，但这样做将是非常不理想的。相反，让我们遵循Unix哲学，一个程序应该只做一个工作，但做得好。我们将使用出色的wget实用程序从PhantomJS将准备的列表中下载文件。

var page = require('webpage').create();
var fs = require('fs');
page.open('http://insttaorder.com/', function(status) 
{
    // Get all links to CSS and JS on the page
    var links = page.evaluate(function(){
        var urls = [];
        $("[rel=stylesheet]").each(function(i, css){ 
            urls.push(css.href);
        });
        $("script").each(function(i, js){
            if(js.src) {
                urls.push(js.src);
            }
        });
        return urls;
    });
    // Save all links to a file
    var url_file = "list.txt";
    fs.write(url_file, links.join("n"), 'w');
    // Launch wget program to download all files from the list.txt to current folder
    require("child_process").execFile("wget", ["-i", url_file], null, function (err, stdout, stderr) {
      console.log("execFileSTDOUT:", stdout);
      console.log("execFileSTDERR:", stderr);
      // After wget finished exit PhantomJS
      phantom.exit();
    });
});

Answer 2

您可以通过onResourceRequested事件获取所有请求的资源。通过检查请求方法和 url，您可以过滤掉不需要的资源，稍后自行下载。

您无需担心路径，您从事件中获得的url始终是完整的。

var webPage = require('webpage');
var page = webPage.create();
page.onResourceRequested = function(req) {
  if(req.method === 'GET')
    if(req.url.endsWith('.css')) console.log('requested css file', JSON.stringify(req));
    else if (req.url.endsWith('.js')) console.log('requested js file', JSON.stringify(req));
};

更多关于资源请求