Comment puis-je rediriger l'utilisateur d'une page vers une autre en utilisant jQuery ou JavaScript pur?

On ne redirige pas simplement en utilisant jQuery

jQuery n'est pas nécessaire et window.location.replace(...)simulera au mieux une redirection HTTP.

window.location.replace(...)est mieux que d'utiliser window.location.href, carreplace() ne conserve pas la page d'origine dans l'historique de la session, ce qui signifie que l'utilisateur ne restera pas coincé dans un fiasco de bouton de retour sans fin.

Si vous souhaitez simuler quelqu'un en cliquant sur un lien, utilisez location.href

Si vous souhaitez simuler une redirection HTTP, utilisez location.replace

Par exemple:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

// Another method for doing redirecting with JavaScript is this:
window.location = "https://stackoverflow.com";

AVERTISSEMENT: cette réponse a simplement été fournie comme une solution possible; ce n'est évidemment pas la meilleure solution, car elle nécessite jQuery. Au lieu de cela, préférez la solution JavaScript pure.

$(location).attr('href', 'http://stackoverflow.com')

Méthode JavaScript "vanille" standard pour rediriger une page

window.location.href = 'newPage.html';

Ou plus simplement: (puisque windowc'est Global)

location.href = 'newPage.html';

Si vous êtes ici parce que vous perdez HTTP_REFERER lors de la redirection, continuez à lire:

(Sinon, ignorez cette dernière partie)

La section suivante est destinée à ceux qui utilisent l' HTTP_REFERERune des nombreuses mesures de sécurité (bien que ce ne soit pas une excellente mesure de protection). Si vous utilisez Internet Explorer 8 ou une version antérieure, ces variables sont perdues lors de l'utilisation de toute forme de redirection de page JavaScript (location.href, etc.).

Ci-dessous, nous allons implémenter une alternative pour IE8 et inférieur afin de ne pas perdre HTTP_REFERER. Sinon, vous pouvez presque toujours simplement utiliserwindow.location.href .

Les tests HTTP_REFERER(collage d'URL, session, etc.) peuvent aider à déterminer si une demande est légitime. ( Remarque: il existe également des moyens de contourner / usurper ces référents, comme indiqué par le lien de droop dans les commentaires)

Solution de test multi-navigateur simple (retour à window.location.href pour Internet Explorer 9+ et tous les autres navigateurs)

Usage: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

Il existe de nombreuses façons de procéder.

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')

Cela fonctionne pour chaque navigateur:

window.location.href = 'your_url';

Il serait utile que vous soyez un peu plus descriptif de ce que vous essayez de faire. Si vous essayez de générer des données paginées, vous disposez de plusieurs options. Vous pouvez générer des liens distincts pour chaque page que vous souhaitez pouvoir accéder directement.

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

Notez que la page en cours dans l'exemple est gérée différemment dans le code et avec CSS.

Si vous souhaitez que les données paginées soient modifiées via AJAX, c'est là que jQuery interviendrait. Ce que vous feriez serait d'ajouter un gestionnaire de clics à chacune des balises d'ancrage correspondant à une page différente. Ce gestionnaire de clics invoquerait du code jQuery qui irait chercher la page suivante via AJAX et mettrait à jour la table avec les nouvelles données. L'exemple ci-dessous suppose que vous disposez d'un service Web qui renvoie les nouvelles données de page.

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});

Je pense également que c'est location.replace(URL)la meilleure façon, mais si vous souhaitez informer les moteurs de recherche de votre redirection (ils n'analysent pas le code JavaScript pour voir la redirection), vous devez ajouter lerel="canonical" balise META à votre site Web.

L'ajout d'une section noscript avec une balise Meta d'actualisation HTML est également une bonne solution. Je vous suggère d'utiliser cet outil de redirection JavaScript pour créer des redirections. Il prend également en charge Internet Explorer pour passer le référent HTTP.

Un exemple de code sans délai ressemble à ceci:

<!-- Place 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://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.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 -->

Mais si quelqu'un veut rediriger vers la page d'accueil, il peut utiliser l'extrait de code suivant.

window.location = window.location.host

Il serait utile que vous ayez trois environnements différents: développement, mise en scène et production.

Vous pouvez explorer cet objet window ou window.location en mettant simplement ces mots dans la console Chrome ou la console Firebug .

JavaScript vous propose de nombreuses méthodes pour récupérer et modifier l'URL actuelle qui s'affiche dans la barre d'adresse du navigateur. Toutes ces méthodes utilisent l'objet Location, qui est une propriété de l'objet Window. Vous pouvez créer un nouvel objet Location dont l'URL actuelle est la suivante.

var currentLocation = window.location;

Structure de base d'une URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

1. Protocole - Spécifie le nom du protocole à utiliser pour accéder à la ressource sur Internet. (HTTP (sans SSL) ou HTTPS (avec SSL))

2. nom d'hôte - Le nom d'hôte spécifie l'hôte propriétaire de la ressource. Par exemple, www.stackoverflow.com. Un serveur fournit des services en utilisant le nom de l'hôte.

3. port - Numéro de port utilisé pour reconnaître un processus spécifique auquel un message Internet ou autre réseau doit être transféré lorsqu'il arrive sur un serveur.

4. chemin - Le chemin donne des informations sur la ressource spécifique au sein de l'hôte à laquelle le client Web veut accéder. Par exemple, stackoverflow.com/index.html.

5. requête - Une chaîne de requête suit le composant de chemin d'accès et fournit une chaîne d'informations que la ressource peut utiliser à certaines fins (par exemple, comme paramètres pour une recherche ou comme données à traiter).

6. hash - La partie d'ancrage d'une URL, comprend le signe de hachage (#).

Avec ces propriétés d'objet Location, vous pouvez accéder à tous ces composants URL

1. hash: définit ou renvoie la partie d'ancrage d'une URL.
2. hôte: définit ou renvoie le nom d'hôte et le port d'une URL.
3. hostname: définit ou renvoie le nom d'hôte d'une URL.
4. href -Définit ou renvoie l'URL entière.
5. pathname -Définit ou retourne le nom de chemin d'une URL.
6. port: définit ou renvoie le numéro de port utilisé par le serveur pour une URL.
7. protocol -Définit ou renvoie le protocole d'une URL.
8. recherche -Définit ou retourne la partie requête d'une URL

Maintenant, si vous souhaitez modifier une page ou rediriger l'utilisateur vers une autre page, vous pouvez utiliser la hrefpropriété de l'objet Location comme ceci

Vous pouvez utiliser la propriété href de l'objet Location.

window.location.href = "http://www.stackoverflow.com";

Les objets de localisation ont également ces trois méthodes

1. assign () - Charge un nouveau document.
2. reload () - Recharge le document actuel.
3. replace () - Remplace le document actuel par un nouveau

Vous pouvez également utiliser les méthodes assign () et replace pour rediriger vers d'autres pages comme celles-ci

location.assign("http://www.stackoverflow.com");

location.replace("http://www.stackoverflow.com");

Différences entre assign () et replace () - La différence entre la méthode replace () et la méthode assign () () est que replace () supprime l'URL du document actuel de l'historique du document, ce qui signifie qu'il n'est pas possible d'utiliser le bouton "retour" pour revenir au document d'origine. Utilisez donc la méthode assign () si vous souhaitez charger un nouveau document et souhaitez donner la possibilité de revenir au document d'origine.

Vous pouvez modifier la propriété href de l'objet de localisation à l'aide de jQuery également comme ceci

$(location).attr('href',url);

Et par conséquent, vous pouvez rediriger l'utilisateur vers une autre URL.

Fondamentalement, jQuery n'est qu'un framework JavaScript et pour faire certaines choses comme la redirection dans ce cas, vous pouvez simplement utiliser JavaScript pur, donc dans ce cas, vous avez 3 options en utilisant JavaScript vanilla:

1) Utiliser l' emplacement remplacer , ce remplacera l'histoire actuelle de la page, signifie qu'il est impossible d'utiliser le dos bouton pour revenir à la page originale.

window.location.replace("http://stackoverflow.com");

2) En utilisant l' attribution d' emplacement , cela gardera l'historique pour vous et en utilisant le bouton de retour, vous pouvez revenir à la page d'origine:

window.location.assign("http://stackoverflow.com");

3) Je recommande d'utiliser l'une de ces méthodes précédentes, mais cela pourrait être la troisième option en utilisant du JavaScript pur:

window.location.href="http://stackoverflow.com";

Vous pouvez également écrire une fonction dans jQuery pour la gérer, mais ce n'est pas recommandé car il ne s'agit que d'une fonction JavaScript pure d'une seule ligne, vous pouvez également utiliser toutes les fonctions ci-dessus sans fenêtre si vous êtes déjà dans la portée de la fenêtre, par exemple window.location.replace("http://stackoverflow.com");pourrait êtrelocation.replace("http://stackoverflow.com");

Je les montre également sur l'image ci-dessous:

Devrait juste être en mesure de définir à l'aide window.location.

Exemple:

window.location = "https://stackoverflow.com/";

Voici un article précédent sur le sujet: Comment rediriger vers une autre page Web?

Avant de commencer, jQuery est une bibliothèque JavaScript utilisée pour la manipulation DOM. Vous ne devez donc pas utiliser jQuery pour une redirection de page.

Un devis de Jquery.com:

Bien que jQuery puisse s'exécuter sans problèmes majeurs dans les anciennes versions de navigateur, nous ne testons pas activement jQuery dans celles-ci et ne résolvons généralement pas les bogues qui peuvent y apparaître.

Il a été trouvé ici: https://jquery.com/browser-support/

Donc jQuery n'est pas une solution globale pour la compatibilité descendante.

La solution suivante utilisant JavaScript brut fonctionne dans tous les navigateurs et est depuis longtemps standard, vous n'avez donc pas besoin de bibliothèques pour la prise en charge de plusieurs navigateurs.

Cette page sera redirigée vers Google après 3000 millisecondes

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

Les différentes options sont les suivantes:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

Lorsque vous utilisez replace, le bouton de retour ne reviendra pas à la page de redirection, comme s'il n'avait jamais été dans l'historique. Si vous souhaitez que l'utilisateur puisse revenir à la page de redirection, utilisez window.location.hrefouwindow.location.assign . Si vous utilisez une option qui permet à l'utilisateur de revenir à la page de redirection, n'oubliez pas que lorsque vous entrez dans la page de redirection, il vous redirigera. Donc, prenez cela en considération lorsque vous choisissez une option pour votre redirection. Dans des conditions où la page ne redirige que lorsqu'une action est effectuée par l'utilisateur, alors avoir la page dans l'historique du bouton de retour sera correct. Mais si la page redirige automatiquement, vous devez utiliser replace pour que l'utilisateur puisse utiliser le bouton de retour sans être forcé de revenir à la page envoyée par la redirection.

Vous pouvez également utiliser des métadonnées pour exécuter une redirection de page comme suit.

META Refresh

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

Emplacement META

<meta http-equiv="location" content="URL=http://evil.com" />

Détournement de BASE

<base href="http://evil.com/" />

De nombreuses autres méthodes pour rediriger votre client sans méfiance vers une page qu'il ne souhaite pas consulter peuvent être trouvées sur cette page (aucune d'entre elles ne dépend de jQuery):

https://code.google.com/p/html5security/wiki/RedirectionMethods

Je voudrais également souligner que les gens n'aiment pas être redirigés au hasard. Ne redirigez les personnes que lorsque cela est absolument nécessaire. Si vous commencez à rediriger des gens au hasard, ils ne reviendront plus jamais sur votre site.

Le paragraphe suivant est hypothétique:

Vous pouvez également être signalé comme un site malveillant. Si cela se produit, lorsque les utilisateurs cliquent sur un lien vers votre site, le navigateur des utilisateurs peut les avertir que votre site est malveillant. Ce qui peut également arriver, c'est que les moteurs de recherche peuvent commencer à baisser votre note si les gens signalent une mauvaise expérience sur votre site.

Veuillez consulter les consignes aux webmasters de Google concernant les redirections: https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971

Voici une petite page amusante qui vous fait sortir de la page.

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

Si vous combinez les deux exemples de pages ensemble, vous obtiendrez une boucle de redirection pour les bébés qui garantira que votre utilisateur ne voudra plus jamais utiliser votre site.

var url = 'asdf.html';
window.location.href = url;

Vous pouvez le faire sans jQuery comme:

window.location = "http://yourdomain.com";

Et si vous ne voulez que jQuery, vous pouvez le faire comme:

$jq(window).attr("location","http://yourdomain.com");

Cela fonctionne avec jQuery:

$(window).attr("location", "http://google.fr");

# Redirection de page HTML à l'aide de jQuery / JavaScript

Essayez cet exemple de code:

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "login.php";
    else
        window.location = "Logout.php";
}

Si vous souhaitez donner une URL complète au format window.location = "www.google.co.in";.

Vous devez mettre cette ligne dans votre code:

$(location).attr("href","http://stackoverflow.com");

Si vous n'avez pas jQuery, optez pour JavaScript:

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");

Question d'origine: "Comment rediriger en utilisant jQuery?", D'où la réponse implémente jQuery >> Cas d'utilisation gratuit.

Pour simplement rediriger vers une page avec JavaScript:

window.location.href = "/contact/";

Ou si vous avez besoin d'un délai:

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

jQuery vous permet de sélectionner facilement des éléments d'une page Web. Vous pouvez trouver tout ce que vous voulez sur une page, puis utiliser jQuery pour ajouter des effets spéciaux, réagir aux actions de l'utilisateur ou afficher et masquer le contenu à l'intérieur ou à l'extérieur de l'élément que vous avez sélectionné. Toutes ces tâches commencent par savoir sélectionner un élément ou un événement .

$('a,img').on('click',function(e){
  e.preventDefault();
  $(this).animate({
    opacity: 0 //Put some CSS animation here
  }, 500);
  setTimeout(function(){
    // OK, finished jQuery staff, let's go redirect
    window.location.href = "/contact/";
  },500);
});

Imaginez que quelqu'un a écrit un script / plugin avec 10000 lignes de code. Avec jQuery, vous pouvez vous connecter à ce code avec juste une ou deux lignes.

Donc, la question est de savoir comment créer une page de redirection, et non comment rediriger vers un site Web?

Pour cela, il vous suffit d'utiliser JavaScript. Voici un petit code qui créera une page de redirection dynamique.

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

Disons que vous venez de mettre cet extrait dans un redirect/index.htmlfichier sur votre site Web, vous pouvez l'utiliser comme ça.

http://www.mywebsite.com/redirect?url=http://stackoverflow.com

Et si vous accédez à ce lien, il vous redirigera automatiquement vers stackoverflow.com .

Lien vers la documentation

Et c'est ainsi que vous créez une page de redirection simple avec JavaScript

Éditer:

Il y a aussi une chose à noter. J'ai ajouté window.location.replacemon code parce que je pense qu'il convient à une page de redirection, mais vous devez savoir que lorsque vous utilisez window.location.replaceet que vous êtes redirigé, lorsque vous appuyez sur le bouton de retour dans votre navigateur, il ne sera pas à la page de redirection, et il retournez à la page précédente, jetez un œil à cette petite démo.

Exemple:

Le processus: stocker la page d'accueil => rediriger la page vers google => google

Lorsque vous êtes sur Google: google => bouton retour dans le navigateur => accueil du magasin

Donc, si cela convient à vos besoins, tout devrait bien se passer. Si vous souhaitez inclure la page de redirection dans l'historique du navigateur, remplacez cette

if( url ) window.location.replace(url);

avec

if( url ) window.location.href = url;

Sur votre fonction de clic, ajoutez simplement:

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});

Essaye ça:

location.assign("http://www.google.com");

Extrait de code d'exemple .

jQuery n'est pas nécessaire. Tu peux le faire:

window.open("URL","_self","","")

C'est aussi simple que ça!

La meilleure façon d'initier une requête HTTP est avec document.loacation.href.replace('URL').

Écrivez d'abord correctement. Vous souhaitez naviguer dans une application pour un autre lien à partir de votre application pour un autre lien. Voici le code:

window.location.href = "http://www.google.com";

Et si vous souhaitez parcourir les pages de votre application, j'ai également du code, si vous le souhaitez.

Vous pouvez rediriger dans jQuery comme ceci:

$(location).attr('href', 'http://yourPage.com/');

Dans JavaScript et jQuery, nous pouvons utiliser le code suivant pour rediriger une page vers une autre page:

window.location.href="http://google.com";
window.location.replace("page1.html");

ECMAScript 6 + jQuery, 85 octets

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

S'il vous plaît ne me tuez pas, c'est une blague. C'est une blague. C'est une blague.

Cela a "fourni une réponse à la question", dans le sens où il a demandé une solution "en utilisant jQuery" qui dans ce cas implique de le forcer dans l'équation d'une manière ou d'une autre.

Ferrybig a apparemment besoin d'expliquer la blague (toujours en plaisantant, je suis sûr qu'il y a des options limitées sur le formulaire de révision), donc sans plus tarder:

D'autres réponses utilisent inutilement jQuery attr()sur les objets locationou window.

Cette réponse en abuse également, mais de manière plus ridicule. Au lieu de l'utiliser pour définir l'emplacement, cela utiliseattr() de récupérer une fonction qui définit l'emplacement.

La fonction est nommée jQueryCodemême s'il n'y a rien de jQuery à ce sujet, et appeler une fonction somethingCodeest tout simplement horrible, surtout lorsque le quelque chose n'est même pas un langage.

Les "85 octets" sont une référence au Code Golf. Le golf n'est évidemment pas quelque chose que vous devriez faire en dehors du golf de code, et en outre, cette réponse n'est clairement pas réellement golfée.

Fondamentalement, grincer des dents.

Javascript:

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

Jquery:

var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window

Utilisation de JavaScript:

Méthode 1:

window.location.href="http://google.com";

Méthode 2:

window.location.replace("http://google.com");

Utilisation de jQuery:

Méthode 1: $ (emplacement)

$(location).attr('href', 'http://google.com');

Méthode 2: fonction réutilisable

jQuery.fn.redirectTo = function(url){
    window.location.href = url;
}

jQuery(window).redirectTo("http://google.com");

Voici une redirection temporelle. Vous pouvez régler le temps de retard à votre guise:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>

Il existe trois façons principales de le faire,

window.location.href='blaah.com';
window.location.assign('blaah.com');

et...

window.location.replace('blaah.com');

La dernière est la meilleure, pour une redirection traditionnelle, car elle n'enregistrera pas la page que vous avez consultée avant d'être redirigée dans votre historique de recherche. Cependant, si vous souhaitez simplement ouvrir un onglet avec JavaScript, vous pouvez utiliser l'une des options ci-dessus. 1

EDIT: Le windowpréfixe est facultatif.