Javascript Girl
  1. Javascript Girl
  3. Téléchargement dynamique de CSS
Intereting Posts
AddEventListener charge sur ajax load SANS jquery Mon eval () est-il sûr? Comment obtenir la valeur de l'horodatage dans php qui est similaire à getTime () en javascript Comment utiliser setTimeout dans une boucle pour … Center Google Maps InfoWindow On Load Comment exécuter les promesses séquentiellement, en passant les paramètres à partir d'un tableau? Ignorer l'interaction de la souris sur l'image de recouvrement Quels problèmes de Cross-Browser avez-vous rencontrés? Utilisation de toFixed (2) et du cycle de mathématiques pour obtenir l'arrondi correct Stockage local HTML5 ou stockage de session Lawnchair .nuke () ne fonctionne pas après avoir rempli mon quota de stockage Changements de position de rotation du marqueur googleMap Passer le curseur / survoler lent sur IE8 Conditions et boucles de la moustache Expression régulière – remplacer les caractères spéciaux, sauf le point

Téléchargement dynamique de CSS

J'essaie de créer une fonction de thème de page pour mon site. Je souhaite charger dynamiquement les thèmes correspondants sur la page à l'aide de fichiers CSS distincts.

J'utilise ce code: 

fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", 'link.css') document.getElementsByTagName("head")[0].appendChild(fileref)

Ce qui fonctionne bien, mais il ne renvoie aucune information si le fichier CSS a été chargé ou non.

Existe-t-il un moyen d'attraper lorsque les .css sont chargés? Peut-être en utilisant ajax?

Internet Explorer déclenchera un événement onReadyStateChange lorsque le fichier CSS est chargé (ou tout autre changement dans readyState ). D'autres navigateurs ne déclenchent aucun événement, donc vous devrez vérifier manuellement si la feuille de style a été chargée, ce qui est facilement possible en vérifiant l'objet document.styleSheets à un intervalle fixe.

Exemple 

 window.onload = function (){ var filename = "link.css",sheet,i; var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); readyfunc = function () { alert("File Loaded"); } timerfunc = function (){ for (i=0;i<document.styleSheets.length;i++){ sheet = document.styleSheets[i].href; if(sheet !== null && sheet.substr(sheet.length-filename.length) == filename) return readyfunc(); } setTimeout(timerfunc,50); } if (document.all){ //Uses onreadystatechange for Internet Explorer fileref.attachEvent('onreadystatechange',function() { if(fileref.readyState == 'complete' || fileref.readyState == 'loaded') readyfunc(); }); } else { //Checks if the stylesheet has been loaded every 50 ms for others setTimeout(timerfunc,50); } document.getElementsByTagName("head")[0].appendChild(fileref); }

C'est moche, mais ça marche dans tous les navigateurs.