如何使用 javascript 从 web 页面获取所有图像 url？

Question

There are couple of ways to load image src urls using javascript, like using document.images or by selecting all img tags and get srcs.

However I can't figure out a way to image urls used within css.

For example, if the webpage has following css code, it loads bg.png , but I can't get that url using methods I mentioned above.

.bg {
  background-image: url('bg.png');
}

Anyone has an idea how to get all these urls used within css?

Answer 1

something like this:

1. Loop all stylesheet rules
2. grab the document element from the stylesheet
3. find the background Image

 var sSheetList = document.styleSheets; for (var sSheet = 0; sSheet < sSheetList.length; sSheet++) { var ruleList = document.styleSheets[sSheet].cssRules; for (var rule = 0; rule < ruleList.length; rule ++) { if (rule.style.cssText.match(/background/)) { var selectorText = ruleList[rule].selectorText ); var img = document.getElementsByClassName(selectorText); var style = img.currentStyle || window.getComputedStyle(img, false); if( style.backgroundImage ) { var bg = style.backgroundImage.slice(4, -1).replace(/"/g, ""); //add to array here or whatever. } } } }

Answer 2

The Resource Timing API collects data on outbound requests, should leave capacity to collect images in both CSS and inline styles performantly.

Haven't tested this, but something akin to this should help you get started:

if ( !('performance' in window) ||
                 !('getEntriesByType' in window.performance) ||
                 !(window.performance.getEntriesByType('resource') instanceof Array)
                 ) {
                      alert('unsupported');
         } else {
            window.addEventListener('load', function() {
               var resources = window.performance.getEntriesByType('resource');
               for(var index in resources) {

                  for(var properties in resources[index]) {
                      console.log(properties);
                      console.log(resources[index][properties]);
                  }
                
               }
            });