web-dev-qa-db-fra.com

Recharger des feuilles de style CSS avec javascript

Je veux recharger toutes les feuilles de style CSS dans une page HTML via JavaScript, sans recharger la page.

Je n’ai besoin de cela que lorsque je développe pour refléter les modifications CSS sans actualiser la page à tout moment.

Une solution possible consiste à ajouter un suffixe ?id=randomnumber au hrefs CSS avec JavaScript, mais je ne veux pas le faire. 

Je veux recharger la feuille de style d'une certaine manière, sans changer son URL, et le navigateur décidera s'il doit charger une nouvelle version de ce css ou non (si le serveur répond avec un 304 - Not modified).

Comment accomplir ceci?

javascriptjqueryhtmlcssdom
14
Tamás Pap

En clair Javascript:

var links = document.getElementsByTagName("link");

for (var x in links) {
    var link = links[x];

    if (link.getAttribute("type").indexOf("css") > -1) {
        link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
}

Dans jQuery:

$("link").each(function() {
    if $(this).attr("type").indexOf("css") > -1) {
        $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
    }
});

Assurez-vous de charger cette fonction après le chargement de l'arborescence DOM.

9
Dillen Meijboom

Il y a beaucoup mieux _ manières d'accomplir:

Je n’ai besoin de cela que lorsque je développe pour refléter les modifications CSS sans actualiser la page à tout moment.

Une solution consiste à utiliser Grunt.js to watch pour les modifications de fichier, puis livereload la page.

Le flux de travail est comme ça:

  • Enregistrer le document css
  • Grunt Watch voit le changement
  • live recharge le css sur la page

Cela peut être associé à d'autres fonctions Grunt, telles que la compilation du préprocesseur {sass | less | stylus}, pour créer un flux de travail comme celui-ci:

  • enregistrer un fichier Sass
  • regarder voit le changement
  • sass est compilé et minifié à l'emplacement cdn
  • nouveau css est chargé sur la page

Autres ressources d'automatisation frontale:

Vidéo d'un employé de Google: http://www.youtube.com/watch?v=bntNYzCrzvE

http://sixrevisions.com/javascript/grunt-tutorial-01/

http://aboutcode.net/vogue/

3
Michael Jasper

Commencez par ajouter un identifiant (s'il n'est pas présent) aux balises de lien de votre feuille de style, comme suit:

<link id="mainStyle" rel="stylesheet" href="style.css" />

Ensuite, en Javascript (utilisant également jQuery), ajoutez la fonction suivante:

function freshStyle(stylesheet){
   $('#mainStyle').attr('href',stylesheet);
}

Enfin, déclenchez la fonction sur l’événement souhaité:

$('#logo').click(function(event){
    event.preventDefault();
    var restyled = 'style.css'; 
    freshStyle(restyled);
});

En mettant à jour la valeur de la feuille de style liée, même si c'est la même valeur, vous obligez le client à regarder à nouveau; le cas échéant, il verra et (re) chargera le dernier fichier.

Si vous rencontrez des problèmes avec le cache, essayez d’ajouter un numéro de version aléatoire (psuedo) à votre nom de fichier, comme ceci:

var restyled = 'style.css?v='+Math.random(0,10000);

J'espère que cela t'aides. Les exemples ci-dessus de Dillen fonctionnent également, mais vous pouvez l'utiliser si vous souhaitez uniquement cibler une ou plusieurs feuilles de style avec des ajustements mineurs.

2
ChongFury

C'est très simple dans le navigateur GoogleChrome.

Appuyez sur F12, cliquez sur la roue dentée située dans le coin inférieur droit et sélectionnez l'option Désactiver le cache (lorsque DevTools est ouvert).

enter image description here

enter image description here

0
Warlock

Une alternative à Grunt serait d'utiliser Prepros .

Il utilise également un observateur de fichiers sur votre dossier de projet, mais pour tous vos fichiers. (js, css, php) et rechargez la page à chaque changement. (+ S'il s'agit d'un petit changement visuel comme css, il n'actualisera pas la page, la transition se fera en douceur. (Fonctionne pour les couleurs, le positionnement, etc.))

Comme Grunt, il compile et réduit vos fichiers, et vous permet de faire un aperçu en direct sur une URL spécifiée (pas seulement localhost). ((Il y a beaucoup plus de fonctionnalités)} _

En utilisant un port spécial, il peut même synchroniser des événementstels que clic, molette de la souris, entrées, etc. 

0
Humbertda