web-dev-qa-db-fra.com

Existe-t-il un moyen simple de recharger css sans recharger la page?

J'essaie de créer un éditeur css en direct avec une fonction de prévisualisation permettant de recharger la feuille de style et de l'appliquer sans avoir à recharger la page. Quelle serait la meilleure façon de s'y prendre?

javascriptcssstylesheetreload
81
Stephen Belanger

Sur la page "edit", au lieu d’inclure votre CSS normalement (avec un <link> tag), écrivez le tout dans un <style> tag. La modification de la propriété innerHTML qui mettra automatiquement la page à jour, même sans aller-retour au serveur.

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

Le Javascript, en utilisant jQuery:

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

Et ça devrait être ça!

Si vous voulez être vraiment chic, attachez la fonction à la touche de réduction de la zone de texte, bien que vous puissiez obtenir des effets secondaires indésirables (la page changera constamment au fur et à mesure de la frappe).

Edit : testé et fonctionne (dans Firefox 3.5 au moins, mais devrait convenir à d'autres navigateurs). Voir la démo ici: http://jsbin.com/owapi

45
nickf

Peut-être pas applicable à votre situation, mais voici la fonction jQuery que j'utilise pour recharger des feuilles de style externes:

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}
103
harto

Découvrez le projet Vogue d’Andrew Davey - http://aboutcode.net/vogue/

7
mcintyre321

Il n'est absolument pas nécessaire d'utiliser jQuery pour cela. La fonction JavaScript suivante rechargera tous vos fichiers CSS:

function reloadCss()
{
    var links = document.getElementsByTagName("link");
    for (var cl in links)
    {
        var link = links[cl];
        if (link.rel === "stylesheet")
            link.href += "";
    }
}
7
Dan Bray

Une solution jQuery supplémentaire

Pour une seule feuille de style avec l'id "css", essayez ceci:

$('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');

Enveloppez-le dans une fonction qui a une portée globale et vous pourrez l’utiliser à partir de la console développeur dans Chrome ou Firebug dans Firefox:

var reloadCSS = function() {
  $('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
};
6
mattdlockyer

Une version plus courte dans Vanilla JS et sur une ligne:

for (var link of document.querySelectorAll("link[rel=stylesheet]")) link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())

Ou élargi:

for (var link of document.querySelectorAll("link[rel=stylesheet]")) {
  link.href = link.href.replace(/\?.*|$/, "?ts=" + new Date().getTime())
}
5
flori

Sur la base de solutions précédentes, j'ai créé un signet avec du code JavaScript:

javascript: { var toAppend = "trvhpqi=" + (new Date()).getTime(); var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") { if (link.href.indexOf("?") === -1) { link.href += "?" + toAppend; } else { if (link.href.indexOf("trvhpqi") === -1) { link.href += "&" + toAppend; } else { link.href = link.href.replace(/trvhpqi=\d{13}/, toAppend)} }; } } }; void(0);

Image de Firefox:

enter image description here

Qu'est ce que ça fait?

Il recharge CSS en ajoutant des paramètres de chaîne de requête (comme ci-dessus):

3
LukLed

Une autre réponse: Il existe un bookmarklet appelé ReCSS . Je ne l'ai pas beaucoup utilisé, mais semble fonctionner.

Il y a un bookmarklet sur cette page à glisser-déposer sur votre barre d'adresse (Vous ne pouvez pas sembler en créer un ici). En cas de panne, voici le code:

javascript:void(function()%7Bvar%20i,a,s;a=document.getElementsByTagName('link');for(i=0;i%3Ca.length;i++)%7Bs=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')%3E=0&&s.href)%20%7Bvar%20h=s.href.replace(/(&%7C%5C?)forceReload=%5Cd%20/,'');s.href=h%20(h.indexOf('?')%3E=0?'&':'?')%20'forceReload='%20(new%20Date().valueOf())%7D%7D%7D)();
0
Christopher Schneider

Oui, rechargez la balise css. Et n'oubliez pas de rendre la nouvelle URL unique (généralement en ajoutant un paramètre de requête aléatoire). J'ai le code pour faire ceci mais pas avec moi pour le moment. Éditera plus tard ...

edit: trop tard ... harto et nickf m'ont battu ;-)

0
slebetman

De manière simple, vous pouvez utiliser rel = "reload" au lieu de rel = "stylesheet".

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
0
Gagan

simple si vous utilisez php Il suffit d'ajouter l'heure actuelle à la fin du css comme

<link href="css/name.css?<?php echo 
time(); ?>" rel="stylesheet">

Alors maintenant, chaque fois que vous rechargez quoi que ce soit, l'heure change et le navigateur pense que c'est un fichier différent puisque le dernier bit change constamment ...

0
asiimwedismas

j'ai maintenant ceci:

    function swapStyleSheet() {
        var old = $('#pagestyle').attr('href');
        var newCss = $('#changeCss').attr('href');
        var sheet = newCss +Math.random(0,10);
        $('#pagestyle').attr('href',sheet);
        $('#profile').attr('href',old);
        }
    $("#changeCss").on("click", function(event) { 
        swapStyleSheet();
    } );

faites n'importe quel élément de votre page avec id changeCss avec un attribut href avec la nouvelle URL css dedans. et un élément de lien avec le css de départ:

<link id="pagestyle" rel="stylesheet" type="text/css" href="css1.css?t=" />

<img src="click.jpg" id="changeCss" href="css2.css?t=">
0
tibi