DOM

Question

में सभी पृष्ठभूमि छवियों की सूची जावास्क्रिप्ट का उपयोग कर किसी दिए गए पृष्ठ पर सभी पृष्ठभूमि छवियों को ढूंढने का सबसे अच्छा तरीका क्या है?

आदर्श अंत परिणाम सभी यूआरएल की एक सरणी होगी।

Answer 1

यह एक जटिल समस्या है। कारण यह है कि पृष्ठभूमि-छवि को एक अलग सीएसएस फ़ाइल का उपयोग करके तत्व पर लागू किया जा सकता है। इस तरह डीओएम में सभी ऑब्जेक्ट्स को पार्स करना और उनकी पृष्ठभूमि-छवि की जांच करना काम नहीं करेगा।

मैं देख सकता हूं कि एक तरीका है एक सरल HttpHandler जो सभी प्रकार की छवियों पर काम करेगा। जब छवियों को सीएसएस फ़ाइल के अंदर संदर्भित किया जाता है तो उन्हें एक अलग इकाई के रूप में डाउनलोड किया जाता है। इसका मतलब है कि HttpHandler छवि के प्रकार को कैप्चर करने में सक्षम होगा और फिर उस पर निष्पादित करेगा।

शायद एक सर्वर साइड समाधान इस पर जाने का सबसे अच्छा तरीका है!

Answer 2

एक तरीका है सभी दस्तावेज़ ऑब्जेक्ट को देखना और शैलियों को प्राप्त करना। फिर "url (" स्ट्रिंग और यदि यह मेल खाता है तो "url (" और ")" के बीच पथ प्राप्त करें और इसे सरणी में डालें। जेएस के लिए एल्गोरिदम। इसे स्वयं करने का प्रयास करें। परेशानियों को मिलेगा - साथ आया । कोड

Answer 3

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

Answer 4

// चेतावनी (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

यहाँ पृष्ठभूमि यूआरएल वहाँ में हैं जाँच करने के लिए एक रास्ता है पृष्ठ पर शैलियों (देखो मा, कोई 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 

इस के साथ

पृष्ठ पर आप npup.getBackgroundUrls(); साथ यूआरएल की एक सरणी प्राप्त कर सकते हैं मैं कुछ किया था (superfluos?) कोड है कि बताते हैं कि कैसे इसके बारे में चला जाता है में टिप्पणी। यह रेखांकित शैलियों को नहीं पकड़ता है, लेकिन मुझे लगता है कि आपके लिए कोई समस्या नहीं थी? बाहरी चादरों में शैलियों और <style> पृष्ठ पर टैग scavenged हैं।

दिनचर्या को संशोधित करने के लिए यदि आप एक गिनती रखने के लिए, या वास्तविक नियम है कि एक यूआरएल आदि