Refresh Css al volo senza ricaricare la pagina

novembre
3

Refresh Css al volo senza ricaricare la pagina

Inserito In: Css, Javascript Scritto da Luca Bottoni

Mi è capitato di dover creare una sorta di mini visualizzatore di temi, Il tema in se doveva contenere solamente le immagini differenti da applicare e ognuna doveva essere inserita nello schema della pagina mediante un file.css. Avevo quindi la necessità di poter applicare le nuove immagini e i nuovi stili senza però ricaricare tutte le informazioni della pagina. La prima idea sarebbe quella di prelevare da una pagina esterna il codice da riscrive mediante Ajax, poi documentandomi un pò ho scoperto che esiste un modo per far capire al browser che è necessario ricaricare il foglio di stile al volo.

La cosa importante per poterlo fare è quello di far capire al browser che il file è cambiato e far si che la cache dello stesso browser venga ricaricata. Partiamo con l’esempio pratico:

1-Il nostro file css (Style.css), che contiene una classe semplice denominata “Myclass

.Myclass{border:1px solid #000000;}

2-file html (test.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style.css" rel="stylesheet" type="text/css">
<title>Documento senza titolo</title>
</head>

<body>
<div class="Myclass">Prova cambio Css</div>
</body>
</html>

Bene,la base del nostro esempio è stata costuita e possiamo vedere che la pagina html contiene solamente un div a cui applichiamo la classe “Myclass” contenuta in un file esterno “Style.css“.
Come dicevo all’inizio è necessario imporre il ricaricamento della cache del nostro browser, per farlo dovremo indicare che il campo href del tag link è diverso. Un buon metodo utilizzato è quello di inserire la data attuale assieme al file come se dovessimo passargli un valore via url (Es: Style.css?variabile=valore)

dovremo quindi sostituire l’attuale:

con 1225705343731” rel=”stylesheet” type=”text/css”>

Per farlo useremo Javascript. La logica è quella di prelevare tutti i tag link per poi eseguirne il parsing e sostituire il valore di href. Nell’esempio che andremo a eseguire, faremo in modo che solo uno specifico file css venga ricaricato e non tutti, vediamo come.

3-Inseriamo la funzione JS

function updateStylesheets(who)
{
//Prelevo tutti i link esistenti come tag
LinkTag=document.getElementsByTagName('link');
for(i=0;i<LinkTag.length;i++)
{
//Associo alla variabile Link l'oggetto Tag di alvoro
Link=LinkTag&#91;i&#93;;
if(Link.rel.toLowerCase().indexOf('stylesheet')>=0 && Link.href)
{
//[^/?=]+\.css =solo il file css
//Estraggo solo il file .css per il confronto con ilparametro who
regEXPCSS = new RegExp(/[^/?=]+\.css/);
MatchRegCSS=regEXPCSS.exec(Link.href);
FileCSS=new String(MatchRegCSS);

//Eseguo solo se il css corrisponde al parametro
if(who==FileCSS)
{
//[^\?]+ tutto l'url senza ?.....
//Estraggo tutto l'url senza le variabili dopo il css
regEXPURL = new RegExp(/[^\?]+/);
MatchRegURL=regEXPURL.exec(Link.href);
FileURL=new String(MatchRegURL);

var h=FileURL.replace(/(&|\\?)RefreshCache=d /,'');
Link.href=h+(h.indexOf('?')>=0?'&':'?')+'RefreshCache='+(new Date().valueOf());
}
}
}
}

La funzione prevede un parametro, questo è semplicemente il file css da ricaricare, quindi mettiamo nel nostro div un “onclick” che ne scateni l’evento. Vediamo tutto il codice assieme:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style.css" rel="stylesheet" type="text/css">

<title>Documento senza titolo</title>
<script>
function updateStylesheets(who)
{
//Prelevo tutti i link esistenti come tag
LinkTag=document.getElementsByTagName('link');
for(i=0;i<LinkTag.length;i++)
{
//Associo alla variabile Link l'oggetto Tag di alvoro
Link=LinkTag&#91;i&#93;;
if(Link.rel.toLowerCase().indexOf('stylesheet')>=0 && Link.href)
{
//[^/?=]+\.css =solo il file css
//Estraggo solo il file .css per il confronto con il parametro who
regEXPCSS = new RegExp(/[^/?=]+\.css/);
MatchRegCSS=regEXPCSS.exec(Link.href);
FileCSS=new String(MatchRegCSS);

//Eseguo solo se il css corrisponde al parametro
if(who==FileCSS)
{
//[^\?]+ tutto l'url senza ?.....
//Estraggo tutto l'url senza le variabili dopo il css
regEXPURL = new RegExp(/[^\?]+/);
MatchRegURL=regEXPURL.exec(Link.href);
FileURL=new String(MatchRegURL);

var h=FileURL.replace(/(&|\\?)RefreshCache=d /,'');
Link.href=h+(h.indexOf('?')>=0?'&':'?')+'RefreshCache='+(new Date().valueOf());
}
}
}
}
</script>
</head>

<body>
<div class="Myclass" onclick="updateStylesheets('Style.css')" >Prova cambio Css</div>
</body>
</html>

Ecco quindi un refresh al volo del file css senza dover ricaricare tutta la pagina. 🙂

Vuoi lasciare un tuo commento?

Attenzione: L'approvazione e l'invio del commento potrebbero avere dei ritardi, quindi, dopo aver premuto il pulante "Invia Commento" attendi.


*