Question

有点新手问题，但是获取我网站上加载的所有JS文件的全名路径列表的最佳方法是什么？

澄清一下：我有一个页面www.mypage.com - 我想获得所有JS文件的列表及其在本页面上加载的全名路径。

Answer 1

你应该首先获得所有脚本标签::

var scripts = document.getElementsByTagName('script');

然后循环播放：

for(var i=0;i<scripts.length;i++){
scripts[i].src;
}

Answer 2

这样的东西会在支持ECMAScript 6的现代浏览器中完成。但是，某些脚本可能会删除其相应的标记，这会将其隐藏在该列表中。

var jsFilePaths = Array.prototype.slice
    .apply(document.querySelectorAll('script'))
    .filter(s => s.src)
    .map(s => s.src);

如果不能选择lambdas，请使用正常的for周期。

通过某些数据加载方法（如XHR或JSONP）加载然后通过eval或new Function执行的脚本也不会显示。

如果您需要拦截并记录XHR，并且您没有集中所有XHR的地方，您可能需要覆盖XMLHttpRequest并为其readystatechange添加一些逻辑检查检索到的响应是否为可执行JavaScript的事件，请参阅此问题以获取更多信息：How to easily listen for xhr requests with javascript?。

如果您需要在将<script>添加到DOM或对其src属性进行操作时拦截所有情况，您可以使用DOM MutationObserver，请参阅an MDN article更多信息。

您可能还需要拦截document.write并查看某些脚本是否添加了更多内联脚本。此外，像<img/>这样的非脚本元素也可以运行脚本，就像众所周知的XSS hack <img src="http://nonexistent.url/x.png" onerror="alert('xss!')" />一样。

此外，重要的是要注意任何此类XHR拦截，尤其是DOM Mutation事件和DOM MutationObserver的使用都会对页面的性能产生不利影响，有时会非常明显。

Answer 3

您也可以使用Performance API：

var entries = performance.getEntriesByType('resource');
entries.map(function(entry) {
  if (entry.initiatorType === 'script') {
    console.log('JS file:', entry.name);
  }
});

获取网页上加载的所有JS文件的列表

3 个答案: