用JavaScript获取网页中的js、css、Flash等文件

获取网页中的静态文件 (JS、CSS、Flash 等) 可以用于很多场合，比如爬虫、调试等。下面是获取网页中静态文件的完整攻略：

1. 查找页面中的静态文件

首先需要知道页面中有哪些静态文件需要获取。可以通过查看页面源代码或使用开发者工具的网络面板来查看页面中加载的静态文件 URL。其中，在 Chrome 浏览器的开发者工具中，可以通过在网络面板中点击“JS”、“CSS”、“Media”、“Flash”等标签来筛选出对应类型的文件，从而快速找到需要的文件 URL。

2. 使用 JavaScript 获取静态文件

获取静态文件的关键是通过 HTTP 请求获取文件的内容。在 JavaScript 中，可以使用 XMLHttpRequest 对象来发送 HTTP 请求和获取对应的响应内容。具体代码可以参考下面的示例：

// 发送 HTTP GET 请求获取指定 URL 的文件
function httpGet(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function () {
      resolve(xhr.responseText);
    };
    xhr.onerror = function () {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}

// 获取某个页面的所有 CSS 文件
function getAllCssFiles() {
  const links = document.getElementsByTagName('link');
  const cssFiles = [];
  for (const link of links) {
    if (link.rel === 'stylesheet') {
      cssFiles.push(link.href);
    }
  }
  const results = cssFiles.map((url) => httpGet(url));
  Promise.all(results).then((responses) => {
    console.log(responses); // 打印所有 CSS 文件内容
  });
}

// 获取某个页面中的某个 JS 文件
function getJsFile(url) {
  httpGet(url).then((response) => {
    console.log(response); // 打印 JS 文件内容
  });
}

上述代码分别实现了两个功能：getAllCssFiles() 可以获取某个页面中的所有 CSS 文件，getJsFile(url) 可以获取指定 URL 的 JS 文件内容。这两个函数均使用了 httpGet(url) 函数发送 HTTP GET 请求来获取文件内容。其中，httpGet(url) 函数封装了 XMLHttpRequest 为 Promise，可以方便地处理响应结果。

3. 示例说明

示例一：爬取某网站的所有 CSS 文件

假设我们要爬取某个网站的所有 CSS 文件，可以使用 getAllCssFiles() 函数来实现。具体步骤如下：

1. 打开浏览器控制台，切换到该网站页面。
2. 复制上述 JavaScript 代码并在控制台中执行。
3. 执行 getAllCssFiles() 函数。
4. 在控制台中查看输出的结果，即可看到网站中所有 CSS 文件的内容。

示例二：获取某个网站中的某个 JS 文件

假设我们要获取某个网站中的某个 JS 文件，可以使用 getJsFile(url) 函数来实现。具体步骤如下：

1. 打开浏览器控制台，切换到该网站页面。
2. 复制上述 JavaScript 代码并在控制台中执行。
3. 修改 url 变量的值为目标文件的 URL。
4. 执行 getJsFile(url) 函数。
5. 在控制台中查看输出的结果，即可看到目标 JS 文件的内容。