Comment vérifier si un fichier CSS externe (cross-domain) est chargé en utilisant Javascript

Question

J'ai une fonction de faire ce qui suit à l'aide javascript:

1. Créer élément de liaison et définissez href = cssFile.
2. Insérez l'élément de liaison dans l'étiquette de tête.
3. Créez un élément div.
4. Définissez le nom de la classe à l'aide de setAttribute
5. appendChild le corps div.
6. Obtient maintenant la valeur de la règle CSS en utilisant document.defaultView.getComputedStyle(divElement, null)[cssRule].

Maintenant getComputedStyle renvoyait les valeurs par défaut, et si j'attends sur point d'arrêt à l'aide Firebug avant getComputedStyle appel, il renvoie la règle CSS du CSS injecté.

Cordialement,
Munim

Answer 1

C'est en fait ce que je faisais.

Pour m'assurer qu'un fichier CSS spécifique est chargé, j'ai ajouté un style à la fin du fichier CSS. Par exemple:

#ensure-cssload-8473649 { 
    display: none 
} 

Maintenant, j'ai une fonction JavaScript qui déclenche le rappel spécifié lorsque le style ci-dessus est chargé sur la page:

var onCssLoad = function (options, callback) { 
    var body = $("body"); 
    var div = document.createElement(constants.TAG_DIV); 
    for (var key in options) { 
     if (options.hasOwnProperty(key)) { 
      if (key.toLowerCase() === "css") { 
       continue; 
      } 
      div[key] = options[key]; 
     } 
    } 

    var css = options.css; 
    if (css) { 
     body.appendChild(div); 
     var handle = -1; 
     handle = window.setInterval(function() { 
      var match = true; 
      for (var key in css) { 
       if (css.hasOwnProperty(key)) { 
        match = match && utils.getStyle(div, key) === css[key]; 
       } 
      } 

      if (match === true) { 
       window.clearTimeout(handle); 
       body.removeChild(div); 
       callback(); 
      } 
     }, 100); 
    } 
} 

Et voilà comment je la fonction ci-dessus:

onCssLoad({ 
    "id": "ensure-cssload-8473649", 
    css: { 
     display: "none" 
    } 
}, function() { 
    // code when you want to execute 
    // after your CSS file is loaded 
}); 

ici le 1er paramètre prend la options où id est de vérifier contre le style de test et la propriété CSS pour vérifier par rapport à ce qui est chargé à partir du CSS.

Answer 2

Je suppose que vous faites cela parce que vous devez créer dynamiquement l'URL de la feuille de style.

couple d'options viennent à l'esprit:

1) Créer le côté serveur URL et éviter ce problème tout à fait.

2) Utilisez setTimeout pour vérifier si le style a été chargé ou non et vérifiez toutes les 20 ms jusqu'à ce que getComputedStyle renvoie la valeur souhaitée.

Je n'aime pas le numéro 2 du tout ... mais c'est une option. Si vous utilisez # 2, assurez-vous d'effacer le délai d'attente même s'il y a une exception.

Answer 3

Vous pouvez créer l'URL css dynamique et récupérer le CSS en texte brut en utilisant un appel ajax normal.

Ensuite, utilisez cette option pour charger le css:

function loadCss(cssText, callback){ 
    var style = document.createElement('style'); 
    style.type='text/css'; 
    if(callBack != undefined){ 
     style.onload = function(){ 
      callBack(); 
     }; 
    } 
    style.innerHTML = cssText; 
    head.appendChild(style); 
} 

Et l'utiliser comme ceci:

loadCss(ajaxResponseText, function(){ 
    console.log("yaay css loaded, now i can access css defs"); 
}) 

Answer 4

Voici une solution qui semble fonctionner sur tous les navigateurs.

function loadCss(fileUrl) { 
    // check for css file type 
    if (fileUrl.indexOf(".css")==fileUrl.length-4) { 
    // Create link element 
    var fileref=document.createElement("link"); 
    fileref.setAttribute("rel", "stylesheet"); 
    fileref.setAttribute("type", "text/css"); 
    fileref.setAttribute("href", fileUrl); 
    if (typeof fileref!="undefined") { 
     // remove the . if this is a relative link 
     if(fileUrl.indexOf('.')==0) { 
     fileUrl = fileUrl.substr(1); 
    } 
    // generate the full URL to use as the fileId 
     var pathname = window.location.pathname; 
    var pathUrl = pathname.substr(0,pathname.lastIndexOf("/")); 
    var fileId = window.location.protocol + "//" + window.location.host + pathUrl + fileUrl; 
     // append the newly created link tag to the head of the document 
     document.getElementsByTagName("head")[0].appendChild(fileref); 

    // begin checking for completion (100ms intervals up to 2000ms) 
    this.checkCSSLoaded(fileId,100,0,2000); 

    } else throw 'INVALID_CSS_ERROR'; 
    } else throw 'INVALID_CSS_ERROR'; 
} 

function checkCSSLoaded(cssHref,milliPerCheck,milliPerCount,milliTimeout) { 
    // Look through all sheets and try to find the cssHref 
    var atSheet = -1; 
    var sheetLength = document.styleSheets.length; 
    while(++atSheet < sheetLength) { 
if(cssHref == document.styleSheets[atSheet].href) { 
     // If found dispatch and event or call a procedure 
     /* Do whatever is next in your code here */ 
    return; 
} 
    } 
    // check for timeout 
    if(milliCount > milliTimeout) { 
    alert('INVALID_CSS_ERROR::'+" ("+cssHref+"+ not found!"); 
    /* Do whatever happens if timeout is reached here */ 
return; 
    } 
    // else keep trying 
    setTimeout(checkCSSLoaded ,milliPerCheck, cssHref, milliPerCheck, milliCount+millPerCheck, milliTimeout); 
} 

Essentiellement, nous

1. Créer une balise de lien.
2. Définir ses attributs il connaît son une balise de lien stylesheet
3. Créer un identifiant de fichier de telle sorte qu'il sera toujours le fichier URL complète
4. Append la balise de lien vers la tête de la tête du document
5. Effectuer des tests consécutifs pour voir si (stylesheet.href == fileID) est l'existence
   • Si trouvé faire autre chose si quelque chose d'autre délai d'attente ne garder le contrôle

Answer 5

L'utilisation de document.styleSheets pour vérifier si un css est chargé est fausse, car dès qu'un lien css est ajouté au DOM, il sera disponible à partir de document.styleSheets, même s'il n'est pas encore chargé. L'ajout d'un marqueur à CSS est aussi hacky.

La bonne solution est d'écouter l'événement onload:

var loadedCss = {}; 
    cssHref = "http://www.foo.com/bar.css"; 
    css = document.createElement("link"); 
    css.setAttribute("rel", "stylesheet"); 
    css.setAttribute("type", "text/css"); 
    css.setAttribute("href", cssHref); 
    css.onload = function(){ 
     loadedCss[cssHref] = true; 
    } 
    document.getElementsByTagName("head")[0].appendChild(css); 


    function isCssLoaded(url) { 
     return loadCss[url]; 
    }