Список всех фоновых изображений в DOM - PullRequest
Новая
       62

Список всех фоновых изображений в DOM

10 голосов
/ 12 марта 2010

Каков наилучший способ найти все фоновые изображения на данной странице с помощью JavaScript?

Идеальный конечный результат - массив всех URL.

Ответы [ 6 ]

11 голосов
/ 12 марта 2010

// оповещения (getallBgimages ()) 

function getallBgimages(){
 var url, B= [], A= document.getElementsByTagName('*');
 A= B.slice.call(A, 0, A.length);
 while(A.length){
  url= document.deepCss(A.shift(),'background-image');
  if(url) url=/url\(['"]?([^")]+)/.exec(url) || [];
  url= url[1];
  if(url && B.indexOf(url)== -1) B[B.length]= url;
 }
 return B;
}

document.deepCss= function(who, css){
 if(!who || !who.style) return '';
 var sty= css.replace(/\-([a-z])/g, function(a, b){
  return b.toUpperCase();
 });
 if(who.currentStyle){
  return who.style[sty] || who.currentStyle[sty] || '';
 }
 var dv= document.defaultView || window;
 return who.style[sty] || 
 dv.getComputedStyle(who,"").getPropertyValue(css) || '';
}

Array.prototype.indexOf= Array.prototype.indexOf || 
 function(what, index){
 index= index || 0;
 var L= this.length;
 while(index< L){
  if(this[index]=== what) return index;
  ++index;
 }
 return -1;
}
4 голосов
/ 12 марта 2010

Без использования jQuery вы можете сделать: 

var elementNames = ["div", "body", "td"] // Put all the tags you want bg images for here
var allBackgroundURLs = new Array();
elementNames.forEach( function(tagName) {
     var tags = document.getElementsByTagName(tagName);
     var numTags = tags.length;
     for (var i = 0; i < numTags; i++) {
         tag = tags[i];
         if (tag.style.background.match("url")) {
             var bg = tag.style.background;
             allBackgroundURLs.push(bg.substr(bg.indexOf("url") + 4, bg.lastIndexOf(")") - (bg.indexOf("url") + 4) ) );
         }
     }
});
1 голос
/ 16 марта 2010

Вот способ проверить, какие фоновые URL-адреса присутствуют в стилях на странице (смотрите Ма, нет jQuery): 

window.npup = (function (doc) {
  var sheets = doc.styleSheets;
  var hash = {}, sheet, rules, rule, url, match;
  // loop the stylesheets
  for (var sheetIdx=0, sheetsLen=sheets.length; sheetIdx<sheetsLen; ++sheetIdx) {
    sheet = sheets[sheetIdx];
    // ie or w3c stylee rules property?
    rules = sheet.rules ? sheet.rules : sheet.cssRules;
    // loop the rules
    for (var ruleIdx=0, rulesLen=rules.length; ruleIdx<rulesLen; ++ruleIdx) {
      rule = rules[ruleIdx];
      if (rule.selectorText && rule.style.cssText) {
        // check if there's a style setting we're interested in..
        if (rule.style.cssText.match(/background/)) {
          // ..and if it has an url in it, put it in the hash
          match = /url\(([^)]*)\)/.exec(rule.style.cssText);
          if (match) {hash[match[1]] = true;}
        }
      }
    }
  }
  // return an array of unique urls
  var urls = [];
  for (url in hash) {urls.push(url);}
  // export a getter for what we found
  return {
    getBackgroundUrls: function () { return urls;}
  };
})(document); // submit reference to the document of interest

С этим на странице вы можете получить массив URL с npup.getBackgroundUrls(); Я сделал несколько (лишних?) Комментариев в коде, которые объясняют, как это происходит. Это не захватывает встроенные стили, но я думаю, что это не проблема для вас? Стили на внешних листах и ​​в тегах <style> на странице очищаются .

Процедуру легко изменить, если вы хотите вести подсчет или поддерживать ассоциации с фактическими правилами, в которых был найден URL-адрес и т. Д.

1 голос
/ 12 марта 2010

Один из способов - просмотреть все объекты документа и найти там стили. Затем протестируйте атрибут style.background на строке «url (» и, если он совпадает, получите путь между «url (» и «)» и поместите его в массив. Алгоритм для JS. Попробуйте сделать это самостоятельно. Найдите проблемы - пришли с код.

0 голосов
/ 19 декабря 2018

Мне нужна была эта функция, но, к сожалению, они были слишком тяжелыми. Если подумать, вот мое решение, если оно может помочь. 

function getAllBgInHtml()
{
    return document.body.innerHTML.match(/background-image.+?\((.+?)\)/gi).map(function(e){ return ((e.match(/background-image.+?\((.+?)\)/i) || [])[1] || '').replace(/&quot;|"/g,'') });
}

Не работает для фонового изображения во внешней таблице стилей.

0 голосов
/ 12 марта 2010

Это сложная проблема. Причина в том, что background-image может быть применено к элементу с помощью отдельного файла CSS. Таким образом, синтаксический анализ всех объектов в DOM и проверка их фонового изображения не будут работать.

Один из способов, которые я вижу, - создать простой HttpHandler, который будет работать со всеми типами изображений. Когда на изображения ссылаются внутри CSS-файла, они загружаются как отдельный объект. Это означает, что HttpHandler сможет захватить тип изображения и затем выполнить его.

Может быть, решение на стороне сервера - лучший способ сделать это!

...