Rediriger le site Web après un certain temps


135

Que dois-je faire pour avoir une fonction sur un site Web où il est dit que cela vous redirigera vers le site en 3 secondes environ?



Je suis juste curieux, pourquoi voudriez-vous faire ça? Chaque fois que j'ai visité une telle page, j'aurais préféré être dirigé en 0 seconde.
allesklar

@allesklar désolé pour la réponse tardive. Je suis en train de développer un site et je voulais voir s'il était plus facile de passer de l'éditeur de code au navigateur Web sans appuyer sur Actualiser à chaque fois.
codedude

Ce générateur de redirection JS vous aidera à créer facilement des extraits de redirection différés. Il a un support noscript et seo, plus un correctif IE 8 - et inférieur - pour passer le référent http!
Patartics Milán

1
@allesklar un exemple pour utiliser ceci. Si vous changez de domaine et que vous souhaitez que tout le monde soit redirigé vers le nouveau domaine au cours du premier mois (mais en leur faisant savoir que l'ancien domaine sera supprimé après environ un mois). Parce que même si vous envoyez et envoyez un e-mail, il y a toujours quelqu'un qui oublie et va à l'ancien domaine.
patricia

Réponses:



69

Vous recherchez probablement le meta refreshtag :

<html>
    <head>
        <meta http-equiv="refresh" content="3;url=http://www.somewhere.com/" />
    </head>
    <body>
        <h1>Redirecting in 3 seconds...</h1>
    </body>
</html>

Notez que l'utilisation de meta refreshest obsolète et désapprouvée ces jours-ci, mais parfois c'est la seule option viable (par exemple, si vous ne parvenez pas à générer des en-têtes de redirection HTTP côté serveur et / ou que vous devez prendre en charge des clients non JavaScript, etc. ).


52

Si vous voulez un meilleur contrôle, vous pouvez utiliser javascript plutôt que la balise meta. Cela vous permettrait d'avoir un visuel quelconque, par exemple un compte à rebours.

Voici une approche très basique utilisant setTimeout()

<html>
    <body>
    <p>You will be redirected in 3 seconds</p>
    <script>
        var timer = setTimeout(function() {
            window.location='http://example.com'
        }, 3000);
    </script>
</body>
</html>


Ce serait la voie à suivre si vous souhaitez que le texte compte à rebours de manière dynamique jusqu'à 0 avant la redirection. Utilisez une minuterie d'une seconde, où la fonction de minuterie met à jour le texte HTML, puis lancez une nouvelle minuterie d'une seconde, jusqu'à ce que 3 secondes se soient écoulées, puis effectuez la redirection.
Remy Lebeau

19

Voici un exemple complet (mais simple) de redirection après X secondes, lors de la mise à jour d'un compteur div:

<html>
<body>
    <div id="counter">5</div>
    <script>
        setInterval(function() {
            var div = document.querySelector("#counter");
            var count = div.textContent * 1 - 1;
            div.textContent = count;
            if (count <= 0) {
                window.location.replace("https://example.com");
            }
        }, 1000);
    </script>
</body>
</html>

Le contenu initial du counterdiv est le nombre de secondes à attendre.


Cela n'a pas fonctionné jusqu'à ce que je le remplace location.href="https://example.com";parwindow.location='https://example.com'
NateH06

1
Peut-être mieux utiliser window.location.replace("http://example.com");pour les raisons évoquées ici: stackoverflow.com/a/506004 Le changement apporterait cette réponse plus générale.
Psyché

10

Le moyen le plus simple consiste à utiliser une balise HTML META comme celle-ci:

<meta http-equiv="refresh" content="3;url=http://example.com/" />

Wikipédia


4

Placez le code de redirection HTML suivant entre les balises et de votre code HTML.

<meta HTTP-EQUIV="REFRESH" content="3; url=http://www.yourdomain.com/index.html">

Le code de redirection HTML ci-dessus redirigera instantanément vos visiteurs vers une autre page Web. Le contenu = "3; peut être remplacé par le nombre de secondes que vous souhaitez que le navigateur attende avant la redirection. 4, 5, 8, 10 ou 15 secondes, etc.


1

Utilisez ce simple code javascript pour rediriger la page vers une autre page en utilisant un intervalle de temps spécifique ...

Veuillez ajouter ce code dans la page de votre site Web, que vous souhaitez rediriger:

<script type="text/javascript">
(function(){
   setTimeout(function(){
     window.location="http://brightwaay.com/";
   },3000); /* 1000 = 1 second*/
})();
</script>

<meta http-equiv="refresh" content="3;url=http://example.com/" />est une meilleure option car elle est plus simple et fonctionne sans prise en charge de JavaScript.
Edward

vous avez raison bro ... mais cela dépend de la situation ... parfois nous devons rediriger sur un événement spécifique car JS est la meilleure option.
Sunny SM

Je comprends ce que vous voulez dire, "Sunny SM". Bien que les balises meta devraient être utilisées presque toujours, il pourrait y avoir des scénarios spécifiques comme le vôtre où JavaScript serait la seule option.
Edward le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.