javascript - 可以列出使用 JavaScript 加载到网页上的外部资源吗？

Question

我想要一个时间间隔来跟踪当前页面上正在加载的项目。例如，假设我有一个页面加载一个 css 文件、一些脚本、图片、一个 flash 视频播放器，然后 flash 视频播放器加载一个视频文件。加载的元素可能与页面来自同一域，也可能不同。其中一些可能是通过 ajax 或 flash 加载的，并且在页面上没有标签。我想跟踪每一个并制作一个存储有关它们的信息的数组。

我想要一个脚本来执行类似于此伪代码的操作:

var all_external_resources = array();

setInterval(function() {
  var external_items = list_external_resources();
  for (var i in external_items) {
    if (all_external_resources.indexOf(external_items[i]) < 0)
      all_external_resources.push(external_items[i]);
  }
}, 100);

这可能吗？

Answer 1

你可以使用 Resource Timing检索资源名称:

var resources = window.performance.getEntriesByType("resource");
resources.forEach(function (resource) {
    console.log(resource.name);
});

它是 Navigation Timing 的扩展( Can I use...) 并在许多浏览器中受支持。