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>