JavaScriptを使用してWebページに読み込まれた外部リソースをリストすることはできますか？

Question

私は、現在のページにどのアイテムがロードされているかを把握する間隔を設けたいと思っています。たとえば、CSSファイル、スクリプト、写真、Flashビデオプレーヤーを読み込み、Flashビデオプレーヤーがビデオファイルを読み込むページがあるとします。ロードされる要素は、ページと同じドメインからのものでも、そうでないものであってもかまいません。それらの一部は、ajaxやフラッシュで読み込まれ、ページ上にタグがありません。私はそれぞれを追跡し、それらに関する情報を格納する配列を作りたいと思います。

私は、この擬似コードに似た何かをするスクリプトを持っているしたいと思います：

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...）の延長だと多くのブラウザでサポートされています。