[Javascript] Alle externe/gelinkte bestanden ophalen.

[Xthemes.us]

Hallo allemaal,

Om mijzelf het leven makkelijker te maken dacht ik een javascriptje op te stellen die in feite alles verzameld wat ik in een manifest file wil steken. Het mag van mij ook Firefox specifieke functies gebruiken aangezien ik het alleen in Firefox uitvoer. Dit is mijn begin:

JavaScript:

var scriptImgNodes = document.querySelectorAll( 'script[src], img[src], link[rel=stylesheet][href], a[href]' );
console.clear();
for( var i = 0; i < scriptImgNodes.length; i++ )
    console.log( scriptImgNodes[i].src || scriptImgNodes[i].href );

Lekker kort en krachtig. Ja, het laat wat te wensen over zoals het er uit filteren van dubbele waarden (makkelijk gefixt). Iets minder makkelijk en dan ook de vraag, wat is de makkelijkste manier om ook plaatjes gelinked in een stylesheet op te vissen.

computedstyle op elk element gebruiken op zoek naar een background image?
stylesheets parsen met een regex?
Iets anders waar ik nog niet bekend mee ben?

[Juup]

Je kunt in Fx zoiets doen:

JavaScript:

for i...
    for j...
        document.styleSheets[i].cssRules[j].style.backgroundImage

[mocean]

Juup schreef op maandag 12 december 2011 @ 17:18:
Je kunt in Fx zoiets doen:

JavaScript:

for i...
    for j...
        document.styleSheets[i].cssRules[j].style.backgroundImage

eigenlijk alles waar url() wordt gebruikt, kan ook list-style-image zijn bijvoorbeeld.

[ZeroXT]

Zoiets:

JavaScript:

for(var b = 0; b < document.styleSheets.length; b++)
{
    var stylesheet = document.styleSheets[b], 
    rule = stylesheet['rules'] ? 'rules' : 'cssRules';
                        
    if(stylesheet[rule])
    {
        for(var i = 0; i < stylesheet[rule].length; i++)
        {
            console.log(stylesheet[rule][i].selectorText);
        }
    }
}

[_Thanatos_]

Plus dat je met javascript in principe ook de src van een <img> kunt zetten, of een bakcgroundImage, of iets anders... Ik hoop voor je dat dat niet gebeurt

[Xthemes.us]

mocean schreef op maandag 12 december 2011 @ 22:02:
eigenlijk alles waar url() wordt gebruikt, kan ook list-style-image zijn bijvoorbeeld.

Scherp, die gebruik ik echter nooit. (Geloof dat de manier van positionering ervan verschilt tussen IE en de rest, zolang geleden dat ik besloten heb om background-image te gebruiken dat ik het me niet meer kan herinneren)

Kan me ook zo ook geen andere properties bedenken die een plaatje op een andere manier instellen.

_Thanatos_ schreef op dinsdag 13 december 2011 @ 15:49:
Plus dat je met javascript in principe ook de src van een <img> kunt zetten, of een bakcgroundImage, of iets anders... Ik hoop voor je dat dat niet gebeurt

Ook scherp! Het hoeft ook niet vlekkeloos te werken en op het moment wordt dat zover ik me kan herinneren ook nergens gedaan (misschien wel in jQuery mobile zelf).

Ik gebruik op het moment deze code:

JavaScript:

var uniqueValues = {};
var scriptImgNodes = document.querySelectorAll( 'script[src], img[src], link[rel=stylesheet][href], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]' );
console.clear();
for( var i = 0; i < scriptImgNodes.length; i++ )
    uniqueValues[scriptImgNodes[i].src || scriptImgNodes[i].href] = 'valueDoesntMatter';

var allNodes = document.querySelectorAll( '*' );
for( var i = 0; i < allNodes.length; i++ )
{
    compBg = window.getComputedStyle( allNodes[i] ).getPropertyValue( 'background-image' );
    if( compBg.match( /url\("?([^"|\)]+)/ ) )
        uniqueValues[RegExp.$1] = 'valueDoesntMatter';
}
for( uniqueValue in uniqueValues )
    console.log( uniqueValue );

Ik heb dus uiteindelijk wel voor getComputedStyle gekozen in plaats van door de stylesheets heen te lopen. Dit heeft namelijk een goede reden, tijdens het testen kwam ik er achter dat de stylesheets anders gebonden zijn aan de 'same domain' policy. In mijn geval is dat lastig want ik gebruik de jQuery mobile CSS van Googles CDN.


Het is niet perfect, maar het het scheelt een hoop handmatig werk. Wat is er niet perfect aan? CSS die pseudo selectors toepast wordt overgeslagen (is wel te implementeren maar heb er zelf geen behoefte aan, de getPropertyValue kan optioneel de pseudo selector als string meekrijgen volgens Mozilla's documentatie). Ook javascript welke plaatjes dynamisch toevoegd (zoals Mocean al opmerkte) kan problemen opleveren. Heb het stukje er ook uitgesloopt welke pagina's include (die kopieer ik makkelijker vanuit de IDE in mijn geval).