Grazie a Javascript è possibile manipolare la navigazione dell’utente mediante operazioni di redirect (reindirizzamenti) o attraverso refresh di pagina.
Per effettuare dei redirect, in realtà, esistono dei sistemi migliori basati su linguaggi lato server come PHP o ASP grazie ai quali è possibile impostare, oltre al redirezionamento, anche uno stato come, ad esempio, il 301 Moved Permanently cosa che con Javascript non è possibile fare (così come accade con i semplici redirect HTML).
Quando, tuttavia, non è possibile operare lato server l’utilizzo di Javascript costituisce la soluzione migliore. Il redirect con javascript, è bene precisarlo, non si verificherà nel momento in cui l’utente avvesse disattivato tale tecnologia all’interno delle impostazioni del proprio browser, ipotesi, tuttavia, alquanto remota.
Indice
Creare redirect in Javascript
Per creare un redirect con Javascript dovremo far ricorso all’oggetto location (che fa parte dell’oggetto window) ed alla proprietà href che viene settata arbitrariamente sulla nuova URL cui deve essere reindirizzato l’utente:
<script>
window.location.href = '/nuova-pagina.html';
</script>
oppure:
<script>
location.href = '/nuova-pagina.html';
</script>
Come potete vedere il richiamo esplicito dell’oggetto window può ritenersi facoltativo in questo caso in quanto i due codici visti sopra producono il medesimo risultato e sono entrambi supportati cross-browser.
In alternativa alla proprietà href è possibile utilizzare il metodo replace() in questo modo:
<script>
window.location.replace('/nuova-pagina.html');
</script>
Anche questa soluzione, come la precedenti, può essere definita cross-browser quindi, da un punto di vista pratico, le varie soluzioni sono assolutamente identiche al fine del risultato perseguito.
Redirect al caricamento della pagina
Non è infrequente che il redirect venga lanciato al momento del caricamento della pagina web. Per fare ciò, la tecnica più utilizzata prevede di lancaire l’istruzione per il redirezionamento all’evento load associato al tag <body> in questo modo:
<body onload="window.location.href = '/nuova-pagina.html';">
Redirect temporizzato con Javascript
Molto spesso il redirect con javascript viene eseguito in modo temporizzato, cioè dopo tot secondi dal caricamento della pagina. Per raggiungere un simile risultato sarà necessario scrivere qualche riga di codice in più, appellandoci al metodo setTimeout():
<script>
// Redirect dopo 5 secondi
setTimeout(function() {
window.location.href = "/nuova-pagina.html";
}, 5000);
</script>
Redirect solo per dispositivi mobili
Attraverso javascript è possibile scrivere istruzioni per effettuare redirect condizionati in base, ad esempio, al sistema operativo o al browser utilizzato dall’utente.
Una casistica piuttosto comune consiste nell’intercettare i dispositivi mobili per effettuare il redirect dell’utente su una pagina ottimizzata. Per fare ciò esistono due tecniche differenti: la prima (più empirica) prevede di effettuare il redirect quando la larghezza dello schermo è più piccola di X, la seconda, invece, si basa sulla valutazione dell’User Agent dell’utente. Vediamole entrambe:
<script>
// Redirect per schermi piccoli
if (screen.width <= 699) {
document.location = "pagina-ottimizzata-mobile.html";
}
</script>
<script>
// Redirect per dispositivi Apple e Android
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i) || (navigator.userAgent.match(/Android/i))) {
document.location = "pagina-ottimizzata-mobile.html";
}
</script>
Redirect con jQuery
Per finire segnalo che il redirect può essere lanciato anche utilizzando la sintassi di jQuery, in questo modo:
<script>
$(location).attr('href','/nuova-pagina.html');
</script>