Redirect temporizzato – html + javascript

ATTENZIONE! Il post ha più di 2 anni e le informazioni contenute potrebbero essere obsolete (ad esempio a causa di un aggiornamento di versione rispetto agli elementi descritti o links modificati da siti esterni).

Per eseguire un redirect dopo un tempo prestabilito in puro html è sufficiente aggiungere all'interno dell'header un meta tag specifico:

<meta http-equiv="REFRESH" content="10; url=http://www.techwave.it" />

Per informare l'utente del redirect che sta per essere eseguito solitamente si utilizza una funzione javascript per visualizzare un countdown. Ecco il codice completo di una pagina di redirect che utilizza php e javascript, in modo da poter essere riutilizzata molto semplicemente:

<?php
    //i parametri potrebbero essere passati alla pagina tramite POST
    $error_params = array(
        'redirect' => 'http://www.techwave.it',
        'timeout' => 10
    );
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="REFRESH" content="10; url=http://www.techwave.it" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <?php
        if($error_params['redirect']){
            echo '<meta http-equiv="REFRESH" content="'.$error_params['timeout'].'; url='.$error_params['redirect'].'" />';
        }
    ?>
    <title>Redirect test - TechWave.it</title>
    <script>
    <!--
 
    var timeout = <?=$error_params['timeout'];?>;
    var url = "<?=$error_params['redirect'];?>";
 
    /**
    * Se trova l'elemento con id=error_timing inizializza il conteggio.
    */
    function js_redirect(){
        if( document.getElementById('error_timing') ){
            setTimeout('countdown()',1000);
        }
    }
 
    /**
    * Conto alla rovescia con aggiornamento dei secondi rimanenti.
    * Alla fine del conteggio esegue il redirect.
    */
    function countdown(){
        timeout--;
        if( timeout >= 0 ){
            document.getElementById('error_timing')[removed] = timeout;
            setTimeout('countdown()',1000);
        } else {
            [removed] = url;
        }
    }
 
    //-->
    </script>
</head>
<body onload="js_redirect()">
    Pagina redirect - techwave.it
    <br />
 
    <?php
        //se viene specificato l'url per il redirect
        if( isset($error_params['redirect']) ){
    ?>
    <p>
        Tra <span id="error_timing"><?=$error_params['timeout']?></span> secondi verrai reindirizzato.
        <br /><br />
 
        <a href="<?=$error_params['redirect']?>">clicca QUI</a>
        se non vieni reindirizzato automaticamente.
    </p>
    <?php
        }
    ?>
 
</body>
</html>

Il codice è completamente commentato quindi eventuali modifiche dovrebbero essere molto semplici. Cambiando i valori dell'array $error_params si possono modificare l'url del redirect e il timeout. Per una maggiore compatibilità il redirect è stato implementato sia tramite il metodo "classico" html sia tramite javascript. Se per qualche motivo entrambi i metodi dovessero fallire all'utente viene data la possibilità di eseguire il redirect manuale cliccando su un link.

Server dedicato

Condividi questo post


Commenti