C’è un modo semplice per ricaricare i CSS senza ricaricare la pagina?

Sto cercando di creare un editor css live in-page con una funzione di anteprima che ricaricherebbe il foglio di stile e lo applicherà senza dover ricaricare la pagina. Quale sarebbe il modo migliore per farlo?

Nella pagina “modifica”, invece di includere il tuo CSS nel modo normale (con un tag ), scrivi tutto in un tag

. La modifica della proprietà innerHTML di ciò aggiornerà automaticamente la pagina, anche senza un round trip sul server.

    

Il Javascript, usando jQuery:

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

E questo dovrebbe essere tutto!

Se si desidera essere davvero fantasiosi, albind la funzione al keydown nell'area di testo, anche se si potrebbero ottenere alcuni effetti collaterali indesiderati (la pagina cambierà costantemente durante la digitazione)

Modifica : testato e funziona (in Firefox 3.5, almeno, dovrebbe andare bene con altri browser). Vedi la demo qui: http://jsbin.com/owapi

Forse non applicabile alla tua situazione, ma ecco la funzione jQuery che utilizzo per ricaricare i fogli di stile esterni:

 /** * 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); }); } 

Scopri il fantastico progetto di Vogue di Andrew Davey – http://aboutcode.net/vogue/

Un’altra soluzione jQuery

Per un singolo foglio di stile con ID “css” prova questo:

 $('#css').replaceWith(''); 

Avvolgilo in una funzione che ha una portata globale e puoi utilizzarla dalla Developer Console in Chrome o Firebug in Firefox:

 var reloadCSS = function() { $('#css').replaceWith(''); }; 

Sulla base di soluzioni precedenti, ho creato un segnalibro con codice 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); 

Immagine da Firefox:

inserisci la descrizione dell'immagine qui

Che cosa fa?

Ricarica il CSS aggiungendo parametri stringa di query (come soluzioni sopra):

Non c’è assolutamente bisogno di usare jQuery per questo. La seguente funzione JavaScript ricaricherà tutti i tuoi file CSS:

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

Una versione più breve in Vanilla JS e in una riga:

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

O espanso:

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

In un modo semplice puoi usare rel = “reload” invece di rel = “stylesheet” .

  

Sì, ricarica il tag css. E ricorda di rendere il nuovo URL univoco (di solito aggiungendo un parametro di query casuale). Ho il codice per farlo, ma non con me adesso. Modificherà più tardi …

modifica: troppo tardi … harto e nickf mi hanno battuto per farlo 😉

ora ho questo:

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

crea qualsiasi elemento nella tua pagina con id changeCss con un attributo href con il nuovo URL css in esso. e un elemento di collegamento con il css di partenza:

   

Un’altra risposta: c’è un bookmarklet chiamato ReCSS . Non l’ho usato estensivamente, ma sembra funzionare.

C’è un bookmarklet su quella pagina da trascinare sulla barra degli indirizzi (non riesco a farne uno qui). Nel caso in cui sia rotto, ecco il codice:

 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)();