Recharger les feuilles de style CSS avec javascript

Je veux recharger toutes les feuilles de style CSS dans une page html via javascript, sans avoir à recharger la page.

J'ai besoin de ce seulement pendant le développement de réfléchir css modifications sans rafraichissement de la page de tous les temps.

Une solution possible est d'ajouter un ?id=randomnumber suffixe css hrefs avec le javascript, mais je ne veux pas le faire.

Je veux recharger la feuille de style d'une certaine façon, sans en changer l'url, le navigateur va décider si il doit charger une nouvelle version de css ou pas (si le serveur répond avec un 304 - Not modified).

Comment faire cela?

source d'informationauteur Tamás Pap

  1. 8

    Dans la plaine 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();
    }
}

    En jQuery:

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

    Assurez-vous de vous charger de cette fonction après l'arbre du DOM est chargé.

  2. 3

    Il y a beaucoup mieux façons de le faire:

    J'ai besoin de ce seulement pendant le développement de réfléchir css modifications sans rafraichissement de la page de tous les temps.

    Une façon est d'utiliser Grunt.js à regarder pour les modifications de fichiers, puis livereload la page.

    Le flux de travail est comme ceci:

    • Enregistrer le document css
    • Grunt regarder considère le changement
    • en direct de la recharge de la css sur la page

    Cela peut être enchaîné avec d'autres Grunt fonctions, telles que {sass|less|stylet} préprocesseur compilation, pour créer un flux de travail comme ceci:

    • enregistrer un fichier Sass
    • regarder voit changement
    • sass est compilé et compacte pour ca emplacement
    • nouveau css est chargé sur la page

    Autres avant la fin de l'automatisation des ressources:

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

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

    http://aboutcode.net/vogue/

  3. 2

    Tout d'abord, ajoutez un id (si non présent) à votre feuille de style lien tags:

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

    Prochaine, en Javascript (aussi en utilisant jQuery), ajoutez la fonction suivante:

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

    Enfin, déclencher la fonction désirée de l'événement:

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

    Par la mise à jour de la valeur de la feuille de style, même si c'est la même valeur, vous pouvez forcer le client à regarder de nouveau; quand il le fait, il va voir et (re)charger le fichier le plus récent.

    Si vous rencontrez des problèmes avec le cache, puis essayer d'ajouter un aléatoires (pseudo) numéro de version de votre nom de fichier comme ceci:

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

    Espère que cette aide. Dillen exemples ci-dessus fonctionne également, mais vous pouvez l'utiliser si vous voulez juste une cible ou d'un ensemble de feuilles de style avec des ajustements mineurs.

  4. 0

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

    Appuyez sur la touche F12, cliquez sur la roue dentée dans le coin en bas à droite et sélectionnez l'option de Désactiver le cache (alors que les DevTools est ouvert).

    Recharger les feuilles de style CSS avec javascript

    Recharger les feuilles de style CSS avec javascript

  5. 0

    Une alternative pour Grunt serait d'utiliser Prepros.

    Il également utiliser un fichier de l'observateur sur le dossier de votre projet, mais pour l'ensemble de vos fichiers. (js, css, php) et de recharger la page à chaque changement. (+ Si c'est un petit changement de visuel comme cssil l'habitude de rafraîchir la page, il va faire une transition en douceur. (Pour les couleurs, positionnement, etc.))

    Comme Grunt, compiler et minifier vos fichiers, et vous permettre de faire une prévisualisation en direct sur une url spécifiée (pas seulement localhost). (Il y a beaucoup plus de fonctionnalités)

    À l'aide d'un port spécial, même synchroniser les événements comme le clic molette de la souris, entrées, etc.