Quelle est la meilleure façon de trouver toutes les images de fond sur une page donnée à l'aide de JavaScript?
Le résultat final idéal serait un tableau de toutes les URL.
7 Réponses :
Ceci est un problème complexe. La raison en est que l'image de fond peut être appliquée à l'élément en utilisant un fichier CSS séparé. De cette façon, analysant tous les objets du DOM et la vérification de leur image de fond ne fonctionnera pas.
L'une des façons que je peux voir est de créer un simple httphandler qui fonctionnera sur tout le type d'images. Lorsque des images sont référencées dans le fichier CSS, ils sont téléchargés comme une entité distincte. Cela signifie que httphandler sera capable de capturer le type de l'image puis de l'exécuter.
Peut-être une solution latérale du serveur est la meilleure façon d'aller sur celui-ci!
OP demande un moyen d'accéder aux images images , pas régulières.
Une du chemin consiste à examiner tout objet de document et à y arriver. Puis Test Style.background attribut sur "URL (" String et si elle correspond à une trajectoire, obtenez le chemin entre "URL (" et ")" et mettez-le en tableau. Algorithm pour JS. Travaillera-t-il. code.
Mais cela pourrait ne pas fonctionner si les styles sont définis dans les fichiers .CSS.
Ce sera. Juste essayer. Peu importe où ils sont déclarés
sans utiliser jQuery, vous pouvez faire:
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) ) );
}
}
});
Dans chrome, je le trouve en fait dans tag.style.backgroundImage , mais fonctionne sinon comme un charme.
//
Pour la 6ème ligne, ne devrait-il pas être [^ ") '] au lieu de [^")] Vous pouvez donc correspondre aux URL qui se terminent par une citation unique?
Voici un moyen de vérifier les urls de fond dans les styles de la page (regardez ma, pas de jQuery): avec ceci sur la page Vous pouvez obtenir un tableau d'URL. avec npup.getbackgroundurls ();
J'ai fait quelque chose (Superfluos?) Commentant dans le code qui explique comment cela se passe.
Il ne saisit pas de styles inlinés, mais je pense que ce n'était pas un problème pour vous?
Styles dans des feuilles externes et dans
Les amateurs de jQuery, remarquez le tag 'no-cadre'.
Le problème principal est que les images et les classes peuvent être définies à l'intérieur de la classe CSS. Les images seront téléchargées séparément. Vous pouvez toutefois créer un HTTPHANDLER qui gérera toutes les images. Pour cela, vous devrez utiliser le document .NET.
La réponse (deuxième extrait) de cette question est la solution la plus rapide et la plus courte que j'ai trouvée: Stackoverflow.com/a/4952411/313501