Rediriger depuis une page HTML

1580

Est-il possible de configurer une page HTML de base pour rediriger vers une autre page lors du chargement?

html  redirect  xhtml  meta  html-head 
— chobo
source
28
Pour suivre les normes Web modernes et fournir des fonctionnalités multi-navigateurs, je préfère utiliser ce générateur de redirection
— Patartics Milán
1
Utilisez .htaccess ou équivalent IIS pour effectuer une redirection côté serveur. De cette façon, même si votre page physique disparaît, la redirection fonctionnera toujours.
— 2017
1
insider.zone/tools/client-side-url-redirect-generator Est un joli petit outil qui assure la compatibilité.
— mackycheese21
2
Cet outil insider.zone a rendu mes redirections tout en minuscules, provoquant 404s. De plus, il n'y a aucun moyen de contacter la personne qui a créé la page à ce sujet.
— Dan Jacobson

Réponses:

2152

Essayez d'utiliser:

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

Remarque: placez-le dans la section de tête.

De plus pour les navigateurs plus anciens si vous ajoutez un lien rapide au cas où il ne se rafraîchirait pas correctement:

<p><a href="http://example.com/">Redirect</a></p>

Apparaîtra comme

Réorienter

Cela vous permettra toujours de vous rendre où vous allez avec un clic supplémentaire.

— Valerij
source
151
L'utilisation du méta-rafraîchissement est déconseillée par le World Wide Web Consortium (W3C). Réf: en.wikipedia.org/wiki/Meta_refresh . Il est donc recommandé d'utiliser à la place la redirection du serveur. Les redirections JavaScript peuvent ne pas fonctionner sur tous les téléphones mobiles car JavaScript peut être désactivé.
— NinethSense
61
Pour info, le 0moyen de se rafraîchir après 0 seconde. Vous voudrez peut-être donner à l'utilisateur un peu plus de temps pour savoir ce qui se passe.
— Dennis
5
@Paul Draper, cela dépend du serveur que vous utilisez
— Gal Margalit
9
J'ai ajouté la fermeture du tag pour respecter les spécifications XHTML5.
— ZenLulz
98
Le commentaire de @ NinethSense fait que la méta-actualisation ressemble à une redirection JavaScript. La méta-actualisation n'est pas JS et fonctionnera toujours lorsque JS est désactivé.
— Druska
1104

J'utiliserais à la fois des méta et du code JavaScript et aurais un lien juste au cas où.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=http://example.com">
        <script type="text/javascript">
            window.location.href = "http://example.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
    </body>
</html>

Pour être complet, je pense que la meilleure façon, si possible, est d'utiliser les redirections du serveur, alors envoyez un code d'état 301 . C'est facile à faire via des .htaccessfichiers utilisant Apache , ou via de nombreux plugins utilisant WordPress . Je suis sûr qu'il existe également des plugins pour tous les principaux systèmes de gestion de contenu. De plus, cPanel a une configuration très simple pour les redirections 301 si vous l'avez installé sur votre serveur.

— Billy Moon
source
12
Cette page de redirection peut être beaucoup plus concise avec HTML5: pastebin.com/2qmfUZMk (qui fonctionne dans tous les navigateurs et passe la validation w3c)
— enyo
9
@enyo Je ne suis pas un grand fan de la suppression des bodybalises et autres. Peut-être qu'il valide et fonctionne peut-être dans les navigateurs courants. Je suis sûr qu'il y a des cas marginaux qui causent des problèmes, et l'avantage semble faible.
— Billy Moon
9
@Fricker, car il se peut qu'ils ne cliquent pas. Ils peuvent contrôler via la voix, taper ou naviguer d'une manière inconnue. C'est une directive d'accessibilité pour suivre les normes de contrôles, comme utiliser l'attribut HTML A standard pour le lien, y penser et le communiquer comme un lien, et ne pas prescrire comment quelqu'un doit interagir avec lui. De plus, avoir click hereun lien n'est pas conseillé, car le lecteur d'écran sera plus difficile à naviguer. Les liens doivent se trouver sur du texte décrivant la destination, afin que l'utilisateur sache où il arrivera avant de la suivre, et cependant il interagit avec elle.
— Billy Moon
2
@BillyMoon, En fait, la signification de "clic" a déjà été surchargée pour inclure également toutes ces significations. "cliquer" fera l'affaire.
— Pacerier
2
@BillyMoon dans quelles circonstances occasionnelles le navigateur ignore-t-il une méta-actualisation de 0 valeur? Merci!
— Gal Margalit
125

Javascript

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>

Balise Meta

<meta http-equiv="refresh" content="0;url=http://example.com">
— amit_g
source
40

Je aussi ajouter un lien canonique pour aider votre SEO personnes:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
— lrkwz
source
3
Vous utiliseriez un lien canonique en plus d'une redirection? en.wikipedia.org/wiki/Canonical_link_element dit que Google préfère utiliser une redirection plutôt qu'un lien canonique.
— LarsH
1
@larsH Alors, ce qui est le plus important pour le référencement, est-ce le lien de redirection ou la page de destination finale?
— Chakotay
— Marc.2377
28

La balise META suivante, placée entre l'intérieur de la tête, indiquera au navigateur de rediriger:

<meta http-equiv="Refresh" content="seconds; url=URL">

Remplacez secondes par le nombre de secondes à attendre avant de rediriger et remplacez URL par l'URL vers laquelle vous souhaitez qu'il redirige.

Alternativement, vous pouvez rediriger avec JavaScript. Placez-le à l'intérieur d'une balise de script n'importe où sur la page:

window.location = "URL"
— Peter Olson
source
28

Ceci est un résumé de toutes les réponses précédentes plus une solution supplémentaire utilisant HTTP Refresh Header via .htaccess

1. En-tête d'actualisation HTTP

Tout d'abord, vous pouvez utiliser .htaccess pour définir un en-tête d'actualisation comme celui-ci

Header set Refresh "3"

C'est l'équivalent "statique" de l'utilisation de la header()fonction en PHP

header("refresh: 3;");

Notez que cette solution n'est pas prise en charge par tous les navigateurs.

2. JavaScript

Avec une autre URL :

<script>
    setTimeout(function(){location.href="http://example.com/alternate_url.html"} , 3000);
</script>

Sans autre URL:

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>

Via jQuery:

<script>
    window.location.reload(true);
</script>

3. Meta Refresh

Vous pouvez utiliser la méta-actualisation lorsque les dépendances sur JavaScript et les en-têtes de redirection sont indésirables

Avec une autre URL:

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

Sans autre URL:

<meta http-equiv="Refresh" content="3">

En utilisant <noscript>:

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>

En option

Comme recommandé par Billy Moon, vous pouvez fournir un lien de rafraîchissement en cas de problème:

Si vous n'êtes pas redirigé automatiquement: <a href='http://example.com/alternat_url.html'>Click here</a>

Ressources

— RafaSashi
source
12
Votre exemple "Via jQuery" n'utilise aucun jQuery.
— Justin Johnson
2
N'appelez pas setTimeoutavec une chaîne. Passez une fonction à la place.
— Oriol
"HTTP Refresh Header via .htaccess" - pourquoi est-il pertinent de poser des questions sur la redirection à partir de la page HTML?
— réduction de l'activité
26

Il serait préférable de configurer une redirection 301 . Voir l'article 301 sur les redirections de Google Webmaster Tools .

— Alex K
source
13
La question demande spécifiquement une page .html de base. Je suppose que le demandeur ne peut pas modifier .htaccess ou similaire (par exemple en utilisant Github Pages ou un hébergement similaire limité). 301 n'est pas faisable dans de tels cas
— Nicolas Raoul
26

Si vous êtes impatient de suivre les normes Web modernes, vous devriez éviter les redirections méta HTML simples. Si vous ne pouvez pas créer de code côté serveur, vous devez plutôt choisir la redirection JavaScript .

Pour prendre en charge les navigateurs désactivés JavaScript, ajoutez une ligne de redirection HTML meta à un noscriptélément. La noscriptméta-redirection imbriquée combinée avec la canonicalbalise aidera également votre classement dans les moteurs de recherche.

Si vous souhaitez éviter les boucles de redirection, vous devez utiliser la location.replace()fonction JavaScript.

Un code de redirection d'URL côté client approprié ressemble à ceci (avec un Internet Explorer 8 et un correctif inférieur et sans délai):

<!-- Pleace this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://stackoverflow.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0; URL=https://stackoverflow.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://stackoverflow.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->
— Patartics Milán
source
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element contient des détails sur les raisons pour lesquelles <meta http-equiv="refresh"le W3C est déconseillé.
— daxelrod
Les arguments fournis par le w3c contre les redirections HTML s'appliquent également aux redirections Javascript. De plus, les redirections Javascript nécessitent que javascript soit activé, contrairement aux redirections HTML. Par conséquent, les redirections HTML sont strictement meilleures que les redirections Javascript dans les cas où l'on peut utiliser les deux.
— Max
17

Vous pouvez utiliser une "redirection" META :

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

ou la redirection JavaScript (notez que tous les utilisateurs n'ont pas activé JavaScript, alors préparez toujours une solution de sauvegarde pour eux)

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>

Mais je recommanderais plutôt d'utiliser mod_rewrite , si vous en avez la possibilité.

— Czechnology
source
5
mod_rewrite (uniquement) s'applique à Apache.
— Paul Draper
1
Concernant Apache: Pourquoi mod_rewrite et pas une simple directive Redirect sans module supplémentaire?
— vog
14

Dès que la page se charge, la initfonction est déclenchée et la page est redirigée:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>
            function init()
            {
               window.location.href = "www.wherever.com";
            }
        </script>
    </head>

    <body onload="init()">
    </body>
</html>
— kkk
source
10

Placez le code suivant entre les balises <HEAD> et </HEAD> de votre code HTML:

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">

Le code de redirection HTML ci-dessus redirigera vos visiteurs vers une autre page Web instantanément. Le content="0;peut être modifié en nombre de secondes pendant lesquelles vous souhaitez que le navigateur attende avant de rediriger.

— Muhammad Saqib
source
9

Mettez le code suivant dans la <head>section:

<meta http-equiv="refresh" content="0; url=http://address/">
— Sebi
source
9

J'ai trouvé un problème en travaillant avec une application jQuery Mobile , où dans certains cas ma balise d'en-tête Meta n'atteignait pas une redirection correctement (jQuery Mobile ne lit pas les en-têtes automatiquement pour chaque page, donc mettre JavaScript là-bas est également inefficace à moins de l'envelopper dans complexité). J'ai trouvé que la solution la plus simple dans ce cas était de mettre la redirection JavaScript directement dans le corps du document, comme suit:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0;url=myURL" />
    </head>

    <body>
        <p>You are not logged in!</p>
        <script language="javascript">
            window.location = "myURL";
        </script>
    </body>
</html>

Cela semble fonctionner dans tous les cas pour moi.

— Ecossais
source
8

La manière simple qui fonctionne pour tous les types de pages est simplement d'ajouter une metabalise dans la tête:

<html>
    <head>
        ...
        <meta HTTP-EQUIV="REFRESH" content="seconds; url=your.full.url/path/filename">
        ...
    </head>
    <body>
        Don't put much content, just some text and an anchor.
        Actually, you will be redirected in N seconds (as specified in content attribute).
        That's all.
        ...
    </body>
</html>
— P. BANERJEE
source
7

Vous devez utiliser JavaScript. Placez le code suivant dans vos balises head:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
— kriscross07
source
7

Vous pouvez rediriger automatiquement par code d'état HTTP 301 ou 302.

Pour PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
— Vô Vị
source
6
Ce n'est pas une redirection à partir d'une page HTML.
— bugmenot123
7

J'utilise un script qui redirige l'utilisateur de index.html vers l' url relative de la page de connexion

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>
— Zolfaghari
source
1
L'URL de redirection dans la méthode ci-dessus peut être relative. par exemple: vous souhaitez rediriger vers la page de connexion ou toute page relative par index.html à la racine du site Web. pas besoin de connaître votre nom de domaine. mais lorsque vous définissez window.location.href = "xxx"; vous devez connaître le nom de domaine.
— Zolfaghari
6

Juste pour faire bonne mesure:

<?php
header("Location: example@example.com", TRUE, 303);
exit;
?>

Assurez-vous qu'il n'y a pas d'écho au-dessus du script, sinon il sera ignoré. http://php.net/manual/en/function.header.php

— Edward
source
9
La question demande spécifiquement une page .html de base. Je suppose que le demandeur ne peut pas modifier .htaccess ou similaire (par exemple en utilisant Github Pages ou un hébergement similaire limité). PHP n'est pas disponible dans de tels cas.
— Nicolas Raoul
Je considérerais quelque chose généré par PHP (Processeur Pré-Hypertexte) comme une "page HTML basique". Nulle part dans la question, il n'a mentionné un type de fichier.
— Edward
6

Utilisez simplement l'événement onload de la balise body:

<body onload="window.location = 'http://example.com/'">
— pat capozzi
source
5 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Redirect to a page</title>
    </head>
    <body onload="window.location.assign('http://example.com')">

    </body>
</html>
— PoM
source
4

Vous n'avez pas besoin de code JavaScript pour cela. Écrivez ceci dans la <head>section de la page HTML:

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

Dès que la page se charge à 0 seconde, vous pouvez accéder à votre page.

— Yash Jain
source
1
cela est déjà couvert dans la réponse acceptée et les principaux commentaires - pensez à modifier la réponse plutôt que d'en poster une en double
— RozzA
3

Pour autant que je les comprenne, toutes les méthodes que j'ai vues jusqu'à présent pour cette question semblent ajouter l'ancien emplacement à l'histoire. Pour rediriger la page, mais ne pas avoir l'ancien emplacement dans l'historique, j'utilise la replaceméthode:

<script>
    window.location.replace("http://example.com");
</script>
— Paul Ogilvie
source
2

Il s'agit d'une solution de redirection avec tout ce que je voulais mais que je n'ai pas trouvé dans un bel extrait propre à couper et coller.

Cet extrait présente un certain nombre d'avantages:

  • vous permet d'attraper et de conserver tous les paramètres de querystring que les gens ont sur leur URL
  • rend le lien inutile pour éviter la mise en cache indésirable
  • vous permet d'informer les utilisateurs des anciens et nouveaux noms de sites
  • affiche un compte à rebours réglable
  • peut être utilisé pour les redirections de liens profonds comme conserve les paramètres

Comment utiliser:

Si vous avez migré un site entier, sur l'ancien serveur, arrêtez le site d'origine et créez-en un autre avec ce fichier comme fichier index.html par défaut dans le dossier racine. Modifiez les paramètres du site afin que toute erreur 404 soit redirigée vers cette page index.html. Cela attrape toute personne qui accède à l'ancien site avec un lien vers une page de sous-niveau, etc.

Accédez maintenant à la balise de script d'ouverture et modifiez les adresses Web oldsite et newSite, puis modifiez la valeur des secondes selon vos besoins.

Enregistrez et démarrez votre site Web. Travail fait - le temps d'un café.

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<style>
body { margin: 200px; font: 12pt helvetica; }
</style>

</head>
<body>

</body>
<script type="text/javascript">

// Edit these to suit your needs.
var oldsite = 'http://theoldsitename.com'
var newSite = "https://thenewsitename.com";
var seconds = 20;  // countdown delay.

var path = location.pathname;
var srch = location.search;
var uniq = Math.floor((Math.random() * 10000) + 1);
var newPath = newSite + path + (srch === '' ? "?" + uniq : srch + "&" + uniq); 


document.write ('<p>As part of hosting improvements, the system has been migrated from ' + oldsite + ' to</p>');
document.write ('<p><a href="' + newPath + '">' + newSite + '</a></p>');
document.write ('<p>Please take note of the new website address.</p>');
document.write ('<p>If you are not automatically redirected please click the link above to proceed.</p>');
document.write ('<p id="dvCountDown">You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.</p>');

function DelayRedirect() {
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = newPath;
        }
    }, 1000);
}
DelayRedirect()

</script>
</html>
Développer l'extrait

— Wombat vaincu
source
1

Rediriger en utilisant JavaScript, <noscript>au cas où JS est désactivé.

<script>
    window.location.replace("https://google.com");
</script>

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>
— Aryan Beezadhur
source
0

Utilisez ce code:

<meta http-equiv="refresh" content="0; url=https://google.com/" />

Veuillez faire attention: mettez-le dans la balise head.

— AmerllicA
source
Je ne sais pas pourquoi ma réponse a voté deux fois? cela fonctionne correctement
— AmerllicA
La même solution que vous avez publiée est déjà publiée par plusieurs utilisateurs plus tôt.
— Rahul Shah
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.