Lista de todas las imágenes de fondo en DOM

Question

¿Cuál es la mejor manera de encontrar todas las imágenes de fondo en una página determinada usando javascript?

El resultado final ideal sería una matriz de todas las URL.

Answer 1

Este es un problema complicado. La razón es que la imagen de fondo se puede aplicar al elemento usando un archivo CSS separado. De esta forma, el análisis de todos los objetos en el DOM y la verificación de su imagen de fondo no funcionarán.

Una de las formas en que puedo ver es crear un HttpHandler simple que funcionará en todo tipo de imágenes. Cuando se hace referencia a las imágenes dentro del archivo CSS, se descargan como una entidad separada. Esto significa que HttpHandler podrá capturar el tipo de imagen y luego ejecutarla.

¡Quizás una solución del lado del servidor sea la mejor manera de seguir con esta!

Answer 2

Una de las maneras es mirar a través de todos los objetos del documento y obtener estilos. Luego prueba el atributo style.background en "url (" string y si coincide, obtén la ruta entre "url (" y ")" y ponlo en la matriz. Algoritmo para JS. Intenta hacerlo tú mismo. Encontrarás problemas, vino con . código

Answer 3

Sin el uso de jQuery, que puede hacer:

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

Answer 4

// alerta (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; 
} 

Answer 5

Aquí está una manera de comprobar lo que el fondo URLs que hay en el estilos en la página (mira Ma, no 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 

Con esto en la página se puede obtener una serie de URL con npup.getBackgroundUrls(); Hice algunas superfluos (?) Al comentar en el código que explica cómo lo hace. No tiene estilos en línea, pero creo que no fue problema para usted? Estilos en hojas externas y en <style> etiquetas en la página son carroñeros.

La rutina es fácil de modificar si se desea mantener un recuento, o mantener asociaciones a las normas actuales que una URL se encuentra en

etc.