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

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 不是一个选项，请使用 normal for cycle。

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

如果您需要拦截和记录 XHR 并且您没有一个集中的地方来完成所有 XHR，您可能需要覆盖XMLHttpRequest并向其readystatechange事件添加一些逻辑以检查检索到的响应是否是可执行的 JavaScript，请参阅这个问题的更多信息： 如何使用javascript轻松侦听xhr请求？ .

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

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

此外，重要的是要注意，任何此类 XHR 拦截，尤其是使用 DOM Mutation Events 和 DOM MutationObserver 都会对页面性能有害，有时甚至很明显。

Answer 3

您还可以使用性能 API ：

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

Answer 4

试试这段代码

var x = document.querySelectorAll("script");
var myarray = []
for (var i=0; i<x.length; i++){
var nametext = x[i].textContent;
var cleantext = nametext.replace(/\s+/g, ' ').trim();
var cleanlink = x[i].src;
myarray.push([cleantext,cleanlink]);
};
function make_table() {
    var table = '<table><thead><th>Name</th><th>Links</th></thead><tbody>';
   for (var i=0; i<myarray.length; i++) {
            table += '<tr><td>'+ myarray[i][0] + '</td><td>'+myarray[i][1]+'</td></tr>';
    };
 
    var w = window.open("");
w.document.write(table); 
}
make_table()