Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

HTML Redirect: come funziona, tutorial ed esempi

Come realizzare un redirect tramite le principali tecnologie web, da HTML a JavaScript, passando per PHP e i linguaggi di programmazione lato server.
Come realizzare un redirect tramite le principali tecnologie web, da HTML a JavaScript, passando per PHP e i linguaggi di programmazione lato server.
Link copiato negli appunti

All'interno del World Wide Web è piuttosto comune che società o semplici privati siano disposti a comprare diversi suffissi per uno stesso dominio per il solo scopo di proteggere il nome del proprio brand o del proprio sito. Avendo a disposizione più domini, si ha però anche la necessità di indirizzarli tutti verso un unico sito web. Un reindirizzamento web, o redirect, è il meccanismo che permette di far questo. Il redirect permette a una pagina web, raggiungibile tramite un certo URL, di reindirizzare l'utente verso un altro URL. Per esempio, visitando un sito web all'indirizzo www.sito-a.it, il redirect presente nella pagina di quel sito ci rimanderà all'indirizzo www.sito-b.it. Il reindirizzamento è molto utile ed è una delle tecniche del World Wide Web che vengono più usate e sfruttate. I motivi di reindirizzamento sono svariati e sono inoltre realizzabili mediante diverse tecniche e diverse tecnologie.

Caso d'uso

Supponiamo di dover mettere offline un sito web (un blog per esempio) avente un certo indirizzo (per esempio www.sito-da-manutenere.it/blog), per un certo periodo di tempo, lasciando però che gli utenti lo possano continuare a raggiungere e a godere dei suoi contenuti. Piuttosto che avvisare tutti gli utenti circa l'esistenza di un URL temporaneo tramite il quale sarà possibile raggiungere il sito durante il suo periodo di manutenzione, risulterebbe più semplice applicare un redirect al vecchio sito e fare in modo che gli utenti, una volta richiesta la pagina web nel suo usuale indirizzo, www.sito-da-manutenere.it/blog, vengano automaticamente reindirizzati in un URL differente, come www.nuovo-sito.it/blog. In questo articolo spiegheremo come far questo mediante l'uso di diverse tecnologie. Prima di addentrarci nelle implementazioni, è opportuno fornire una piccola infarinatura sull'HyperText Transfer Protocol (HTTP).

HTTP e i codici di risposta

Ogni volta che un indirizzo web viene richiesto tramite l' immissione del suo indirizzo nella barra del browser, spesso senza nemmeno rendercene conto stiamo usando l'HyperText Transfer Protocol (HTTP). Senza volerci dilungare troppo sul suo funzionamento, quando richiediamo una pagina web vengono effettuate diverse richieste HTTP verso il server in cui si trova la pagina, per ottenere le risorse che serviranno per la sua corretta visualizzazione (HTML, CSS, JavaScript, etc...). È opportuno sottolineare che a ogni richiesta HTTP corrisponde una risposta HTTP fornita dal server. Le risposte HTTP possono essere molteplici, e quella che forse viene più comunemente ricordata è la 404 - Page not found, che avvisa l'utente circa l'assenza della pagina richiesta all'interno del server web. Un'altra risposta HTTP, forse meno conosciuta rispetto alla 404, è la 301 - Moved Permanently, che ci informa circa l'irraggiungibilità della pagina richiesta a causa di un suo spostamento. Come detto prima, per effettuare dei redirect esistono diverse tecniche e le migliori si basano sui linguaggi lato server come PHP o ASP grazie ai quali è possibile impostare, oltre al semplice redirezionamento, anche una risposta HTTP, come, per esempio il 301 Moved Permanently.

Redirect in HTML

Il modo più semplice e immediato per eseguire il redirect di una pagina web consiste nell'uso del meta tag HTML refresh. Supponiamo di voler reindirizzare una pagina A ad un'altra pagina B. Per impostare tale reindirizzamento non bisognerà far altro che inserire il seguente codice HTML all'inizio della pagina A, all'interno del tag <head>:

<meta http-equiv="refresh" content="0; URL='http://B.it'" />

L'attributo content indica il delay, ovvero il ritardo, che il nostro browser impiega prima di effettuare il reindirizzamento. Potremmo voler informare l'utente dell'imminente redirect tramite qualche avviso sulla pagina web e dargli un certo tempo per la sua lettura, così come effettuarlo immediatamente, settandolo, come nell'esempio, a 0. Notiamo che con questa tecnica non è necessario impostare un codice di stato HTTP, ed inoltre è molto importante fare attenzione all'apertura e alla chiusura delle virgolette (ci sono delle doppie virgolette che racchiudono degli apici).

Sebbene questo metodo sia quello più semplice o immediato, è bene dire che potrebbe presentare un problema che ne renderebbe l'uso vano.

Secondo il W3C ci sarebbero, infatti, alcuni browser che non supportano correttamente il meta tag HTML refresh. Onde evitare spiacevoli sorprese, conviene quindi non usare questo approccio e passare a qualcosa di più sofisticato.

Redirect script in JavaScript

Il redirect può anche essere effettuato tramite JavaScript e, come nel caso precedente, si realizza con pochissimo codice:

window.location = "http://B.it";

Per creare un redirect mediante JavaScript, non dovremo far altro che impostare la proprietà location dell'oggetto window con il nuovo URL, eventualmente inserendo questo codice all'interno di un tag script della pagina HTML in cui voler eseguire il reindirizzamento.

Altri metodi JavaScript per creare un redirect di pagina sono i seguenti:

window.location = "http://B.it";
window.location.href = "http://B.it";
window.location.assign("http://B.it");
window.location.replace("http://B.it");

Il redirect con JavaScript non funzionerebbe nel (remoto) caso in cui l'utente avesse disattivato la tecnologia JavaScript all'interno delle impostazioni del proprio browser.

Redirect in PHP

Essendo PHP un linguaggio di tipo server, è sicuramente una delle migliori strategie da adoperare qualora si volesse impostare un redirect sulla propria pagina web, almeno nei casi in cui questa è realizzata in PHP. Il codice sotto riportato deve essere inserito nella pagina web su cui eseguire il redirect, prima di ogni altro contenuto:

<?php
header('Location: http://B.it');
exit;
?>

Come è possibile vedere, la funzione header è quella che si occuperà del redirect verso il sito http://B.it. Quello che non si vede dal codice riguarda invece la risposta HTTP ritornata, di default, dalla funzione header al browser. Di default questa funzione ritorna una risposta di tipo HTTP 302, che avvisa che la pagina è stata spostata solo temporaneamente. Come prassi, è però consigliato usare sempre una risposta HTTP di tipo 301, perchè molti browser salvano nella loro cache tale risposta, velocizzando l'accesso della nuova pagina.

Per cambiare il tipo di risposta HTTP in PHP, dobbiamo modificare il codice precedente nella seguente maniera:

<?php
header('Location: http://B.it', true, 301);
exit();
?>

Redirect in ASP

Anche ASP è un linguaggio di tipo server e per reindirizzare automaticamente la navigazione verso un sito web o una pagina esterna si utilizza l'istruzione Response.Redirect:

<% Response.redirect("http://B.it") %>

Il codice è molto semplice. L'unico parametro dell'istruzione response.redirect è l'indirizzo URL di destinazione posto tra due virgolette.


Ti consigliamo anche