Można wyświetlić zasoby zewnętrzne załadowane na stronie za pomocą JavaScript?

Question

Chciałbym mieć przedział, który śledzi, jakie elementy są ładowane na bieżącej stronie. Na przykład załóżmy, że mam stronę, która ładuje plik css, kilka skryptów, obrazów, odtwarzacz wideo flash, a następnie odtwarzacz wideo flash ładuje plik wideo. Załadowane elementy mogą, ale nie muszą, pochodzić z tej samej domeny co strona. Niektóre z nich mogą być ładowane przez ajax lub flash i nie mają tagu na stronie. Chcę śledzić każdy z nich i utworzyć tablicę, która przechowuje informacje o nich.

Chciałbym mieć skrypt, który robi coś podobnego do tego Pseudokod:

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); 

byłoby to możliwe?

Answer 1

Można ewentualnie użyć Resource Timing pobrać nazwy zasobów:

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

To rozszerzenie Navigation Timing (Can I use...) i jest obsługiwany w wielu przeglądarkach.