Question

给定一个网址（例如localhost:8000），脚本如何找到浏览器加载的资源（通过HTTP请求）？

例如，我们假设/路由响应：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        some content
        <img src="/foo.png" alt="">
    </body>
</html>

将加载的资源是：

/css/style.css
foo.png

这很简单（仅仅是通过cheerio左右的dom迭代），但我认为它应该是原生的。

响应HTML中的迭代不适用于其他CSS @import和background-image等等。

使用CSS，图像以及浏览器加载的其他资源获取列表的本机方法是什么？

也许可以通过jsdom？

Answer 1

与@adeneo建议一样，缺少的关键字是无头浏览器。我通过zombie library发现它非常简单。您可以在下面看到一个小例子，the documentation is a great resource。

// Dependencies
var Browser = require("zombie");

// Load localhost:9000
Browser.localhost("localhost", 9000);

// Load the page from localhost,
// including js, css, images and iframes
var browser = new Browser({
  features: "scripts css img iframe"
});

// Open the page and list the resources
browser.visit("/", function(error) {
    console.log(browser.resources.map(function (c) {
        return c.request.url;
    }));
});

给定一个url，脚本怎么能找到加载的资源？

1 个答案: