獲取 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()