back to top

Redirect Javascript: redirezionare l’utente ad un’altra pagina web

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.

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>

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Il file manifest.json: cos’è e a cosa serve

Il file manifest.json è un componente chiave nelle applicazioni web moderne,...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll è una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale è un identificativo tributario univoco che...

Math.ceil() – Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript è utilizzato...

Minificare Javascript: librerie e strumenti online per comprimere il sorgente JS

La minificazione è un processo abbastanza diffuso nell'implementazione delle...

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l'inserimento...
Pubblicità