web-dev-qa-db-fra.com

Rediriger depuis une page HTML

Est-il possible de configurer une page HTML de base pour rediriger une autre page au chargement?

1495
chobo

Essayez d'utiliser:

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

Remarque: Placez-le dans la tête.

En outre, pour les anciens navigateurs, si vous ajoutez un lien rapide au cas où il ne serait pas actualisé correctement:

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

Apparaîtra comme

redirection

Cela vous permettra quand même d’arriver où vous allez avec un clic supplémentaire.

2080
Valerij

Je voudrais utiliser à la fois meta , et code JavaScript et aurait un lien 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 le meilleur moyen, si possible, consiste à utiliser les redirections du serveur. Envoyez donc un code d'état 1 . Ceci est facile à faire via les fichiers .htaccess en utilisant Apache , ou en utilisant de nombreux plugins en utilisant WordPress . Je suis sûr qu'il existe également des plug-ins pour tous les principaux systèmes de gestion de contenu. En outre, cPanel a une configuration très facile pour les redirections 301 si cela est installé sur votre serveur.

1076
Billy Moon

JavaScript

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

Balise méta

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

Je voudrais aussi ajouter un lien canonique pour aider vos SEO personnes:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
39
lrkwz

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. HTTP Refresh Header

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 fonction header() dans PHP

header("refresh: 3;");

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

2. JavaScript

Avec une alternative URL :

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

Sans une 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 ne sont pas souhaitables.

Avec une autre URL:

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

Sans une autre URL:

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

Utiliser <noscript>:

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

Facultatif

Conformément aux recommandations de Billy Moon, vous pouvez fournir un lien d'actualisation en cas de problème:

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

Ressources

29
RafaSashi

La méta-balise suivante, placée entre l'intérieur de la tête, indiquera au navigateur de rediriger les messages:

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

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

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

window.location = "URL"
27
Peter Olson

Il serait préférable de mettre en place un 1 redirect . Voir l'article sur les outils pour les webmasters de Google 1 redirections.

26
Alex K

Si vous souhaitez suivre les normes Web modernes, évitez les redirections méta en HTML. 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 par JavaScript, ajoutez une ligne de redirection HTML à un élément noscript. La méta-redirection imbriquée noscript combinée à la balise canonical aidera également votre classement dans les moteurs de recherche.

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

Un code correct côté client RL redirect se présente comme suit (avec Internet Explorer 8, 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 -->
25
Patartics Milán

Vous pouvez utiliser un META "redirection":

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

ou JavaScript redirection (notez que tous les utilisateurs ont JavaScript activé, donc préparez-vous toujours une solution de sauvegarde)

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

Mais je recommanderais plutôt d'utiliser mod_rewrite, si vous avez l'option.

17
Czechnology

Dès que la page est chargée, la fonction init est activé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>
14
kkk

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 instantanément vos visiteurs vers une autre page Web. Le content="0; peut être remplacé par le délai en secondes pendant lequel le navigateur doit attendre avant la redirection.

10
Muhammad Saqib

Placez le code suivant dans la section <head>:

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

J'ai rencontré un problème lorsque je travaillais avec une application jQuery Mobile , dans laquelle, dans certains cas, ma balise d'en-tête Meta ne permettait pas une redirection correcte (jQuery Mobile ne lit pas les en-têtes automatiquement pour chaque page, donc il faut y insérer JavaScript. est également inefficace à moins d’envelopper dans la complexité). J'ai trouvé que la solution la plus simple dans ce cas était de placer 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.

9
Scotsman

La méthode simple qui fonctionne pour tous les types de pages consiste simplement à ajouter une balise meta dans l'en-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>
8
P. BANERJEE

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

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

Vous pouvez rediriger automatiquement par les codes d’état HTTP 301 ou 302.

Pour PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
7
Vô Vị

J'utilise un script qui redirige l'utilisateur de index.html vers relatif url 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>
6
Zolfaghari

Il suffit d'utiliser l'événement onload de la balise body:

<body onload="window.location = 'http://example.com/'">
6
pat capozzi

Juste pour faire bonne mesure:

<?php
header("Location: [email protected]", 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

6
Edward
<!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>
5
PoM

moteur Razor pour un délai de 5 secondes:

<meta http-equiv="Refresh"
         content="5; [email protected]("Search", "Home", new { id = @Model.UniqueKey }))">
5
JoshYates1980

Vous n'avez pas besoin de code JavaScript pour cela. Ecrivez ceci dans la section <head> 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.

4
Yash Jain

Autant que je sache, 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 sans utiliser l'ancien emplacement de l'historique, j'utilise la méthode replace:

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

Ceci est une solution de redirection avec tout ce que je voulais mais ne pouvais pas trouver dans un extrait propre et agréable à couper/coller.

Cet extrait présente de nombreux avantages:

  • vous permet d'attraper et de conserver tous les paramètres de requête qui ont été placés sur leur URL
  • rend le lien inconvenant pour éviter la mise en cache non désirée
  • vous permet d'informer les utilisateurs des anciens et des nouveaux noms de sites
  • montre un compte à rebours réglable
  • peut être utilisé pour les redirections en lien profond, car conserve les paramètres

Comment utiliser:

Si vous avez migré un site entier, arrêtez le site d'origine sur l'ancien serveur 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 intercepte toute personne accédant à l'ancien site avec un lien dans une page de sous-niveau, etc.

Maintenant, allez à la balise de script d'ouverture et modifiez les adresses Web oldsite et newSite, puis modifiez la valeur secondes en fonction des besoins.

Enregistrez et démarrez votre site Web. Travail fait - temps pour 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>
2
Vanquished Wombat

Utilisez ce code:

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

Veuillez faire attention: le mettre dans la balise head.

0
AmerllicA

Vous pouvez le faire en javascript:

location = "url";
0
GameMaster1928