web-dev-qa-db-fra.com

Comment puis-je rediriger vers une autre page Web?

Comment rediriger l'utilisateur d'une page à une autre à l'aide de jQuery ou de JavaScript pur?

7729
venkatachalam

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 préférable à l'utilisation de window.location.href, car replace() ne conserve pas la page d'origine dans l'historique de session, ce qui signifie que l'utilisateur ne sera pas bloqué dans un fiasco sans fin avec le bouton Précédent.

Si vous voulez simuler quelqu'un qui clique sur un lien, utilisez location.href

Si vous voulez 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";
14040
Ryan McGeary

ATTENTION: Cette réponse a simplement été fournie comme 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')
1583
Boris Guéry

Standard "Vanilla" Méthode JavaScript permettant de rediriger une page:

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


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


La section suivante est destinée aux personnes utilisant HTTP_REFERER comme une des nombreuses mesures sécurisées (bien que ce ne soit pas une mesure de protection efficace). Si vous utilisez Internet Explorer 8 ou une version infé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 & lower afin de ne pas perdre HTTP_REFERER. Sinon, vous pouvez presque toujours simplement utiliser window.location.href.

Le test sur HTTP_REFERER (collage d'URL, session, etc.) peut être utile pour indiquer si une demande est légitime. ( Remarque: il existe également des moyens de contourner/parrainer ces sites référents, comme indiqué par le lien de droop dans les commentaires.


Solution simple de test inter-navigateurs (repli sur window.location.href pour Internet Explorer 9+ et tous les autres navigateurs)

Utilisation: 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; 
    }
}
586

Il y a beaucoup de façons de faire cela.

// 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')
398
Govind Singh

Cela fonctionne pour tous les navigateurs:

window.location.href = 'your_url';
308
Fred

Cela aiderait si vous décriviez un peu plus ce que vous essayez de faire. Si vous essayez de générer des données paginées, vous pouvez procéder de différentes manières. Vous pouvez générer des liens distincts pour chaque page à laquelle 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 ici que jQuery entrerait. Ce que vous feriez, c'est d'ajouter un gestionnaire de clics à chacune des balises d'ancrage correspondant à une page différente. Ce gestionnaire de clics appelle un code jQuery qui va chercher la page suivante via AJAX et met à 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
    });
});
282
tvanfosson

Je pense également que location.replace(URL) est la meilleure solution, mais si vous souhaitez informer les moteurs de recherche de votre redirection (ils n'analysent pas le code JavaScript pour afficher la redirection), vous devez ajouter la balise méta rel="canonical" à votre site Web.

L'ajout d'une section noscript contenant une balise méta d'actualisation HTML constitue également une bonne solution. Je vous suggère d'utiliser ceci outil de redirection JavaScript pour créer des redirections. Il prend également en charge Internet Explorer pour transmettre le référent HTTP.

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 -->
241
Patartics Milán

Mais si quelqu'un veut rediriger sa page d'accueil, il peut utiliser l'extrait 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 dans la console de Firebug .

216
Nadeem Yasin

JavaScript vous propose de nombreuses méthodes pour récupérer et modifier l'URL actuelle qui est affichée 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 avec l'URL actuelle comme suit.

var currentLocation = window.location;

Structure de base d'une URL

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

enter image description here

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

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

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

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

  5. query - Une chaîne de requête suit le composant de chemin et fournit une chaîne d'informations que la ressource peut utiliser à certaines fins (par exemple, en tant que paramètres d'une recherche ou en tant que 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 d'URL.

  1. hash -Définit ou retourne la partie ancre d'une URL.
  2. Host -Définit ou retourne le nom d'hôte et le port d'une URL.
  3. nomhôte -Définit ou retourne le nom d'hôte d'une URL.
  4. href -Définit ou renvoie l'URL complète.
  5. nom du chemin -Définit ou retourne le chemin d'accès à une URL.
  6. port -Définit ou retourne le numéro de port utilisé par le serveur pour une URL.
  7. protocole -Définit ou retourne le protocole d'une URL.
  8. recherche -Définit ou retourne la partie requête d'une URL

Maintenant, si vous voulez changer une page ou rediriger l'utilisateur vers une autre page, vous pouvez utiliser la propriété href de l'objet Location comme ceci

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

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

Location Location 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 utiliser les méthodes assign () et replace pour rediriger également vers d'autres pages comme celles-ci.

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

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

En quoi assign () et replace () diffèrent - La différence entre replace ( ) méthode et assign () méthode (), 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 "Précédent" pour revenir au document d'origine. Donc, utilisez la méthode assign () si vous souhaitez charger un nouveau document et souhaitez donner la possibilité de revenir au document d'origine.

Vous pouvez changer la propriété href de l'objet location en utilisant jQuery aussi comme ceci

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

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

202
Nikhil Agrawal

Fondamentalement jQuery est juste un framework JavaScript et permet de faire certaines choses comme la redirection dans ce cas, vous pouvez simplement utiliser du JavaScript pur. Dans ce cas, vous disposez de 3 options utilisant JavaScript Vanille:

1) En utilisant location replace , cela remplacera l'historique actuel de la page, ce qui signifie qu'il n'est pas possible d'utiliser le retour pour revenir à la page d'origine.

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

2) En utilisant location assigner , cela gardera l’historique pour vous et en utilisant le bouton Précédent, vous pourrez revenir à la page originale:

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 utilisant du JavaScript pur:

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

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

Aussi je les montre tous sur l'image ci-dessous:

location.replace location.assign

192
Alireza

Devrait juste pouvoir régler en utilisant window.location.

Exemple:

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

Voici un post passé sur le sujet: Comment puis-je rediriger vers une autre page Web?

190
Newse

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

Une citation de Jquery.com:

Bien que jQuery puisse s'exécuter sans problèmes majeurs dans les versions de navigateur antérieures, nous ne testons pas activement jQuery avec celles-ci et, en règle générale, ne corrigeons 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 ultime pour la compatibilité ascendante.

La solution suivante, qui utilise JavaScript brut, fonctionne dans tous les navigateurs et est standard depuis longtemps. Vous n’avez donc besoin d’aucune bibliothèque pour la prise en charge de plusieurs navigateurs.

Cette page sera redirigé 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"

Lors de l’utilisation de remplacer, le bouton Précédent ne reviendra pas à la page de redirection, comme si cela n’était jamais dans l’historique. Si vous souhaitez que l'utilisateur puisse revenir à la page de redirection, utilisez window.location.href ou window.location.assign. Si vous utilisez une option permettant à l'utilisateur de revenir à la page de redirection, n'oubliez pas que lorsque vous entrez dans la page de redirection, il vous redirigera. Mettez donc cela en considération lorsque vous choisissez une option pour votre redirection. Dans des conditions où la page est uniquement redirigée lorsqu'une action est effectuée par l'utilisateur, le fait d'avoir la page dans l'historique du bouton de retour sera correct. Mais si la page redirige automatiquement, vous devez utiliser l'option de remplacement afin que l'utilisateur puisse utiliser le bouton Précédent sans être forcé de revenir à la page que la redirection envoie.

Vous pouvez également utiliser les 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/" />

Plusieurs autres méthodes pour rediriger votre client peu méfiant vers une page qu’elles ne souhaitent peut-être pas se trouvent sur cette page (aucune d’entre elles ne dépend de jQuery):

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

Je tiens également à souligner que les gens n'aiment pas être redirigés au hasard. Réorientez les personnes uniquement lorsque cela est absolument nécessaire. Si vous commencez à rediriger des personnes au hasard, elles ne reviendront jamais sur votre site.

Le paragraphe suivant est hypothétique:

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

Consultez les consignes de Google pour les webmasters concernant les redirections: https://support.google.com/webmasters/answer/2721217?hl=fr&ref_topic=6001971

Voici une petite page amusante qui vous met à la porte.

<!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 page, vous obtiendrez une nouvelle boucle de redirection qui garantira que votre utilisateur ne voudra plus jamais utiliser votre site.

163
Patrick W. McMahon
var url = 'asdf.html';
window.location.href = url;
157
user188973

Vous pouvez le faire sans jQuery en tant que:

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

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

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

Cela fonctionne avec jQuery:

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

# HTML Page Redirect utilisant 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 voulez donner une URL complète sous la forme window.location = "www.google.co.in";.

86
Sakthi Karthik

Vous devez mettre cette ligne dans votre code:

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

Si vous n'avez pas jQuery, utilisez JavaScript:

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

La question est donc de savoir comment créer une page de redirection et non comment rediriger vers un site Web.

Il vous suffit d'utiliser JavaScript pour cela. Voici un code minuscule 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>

Donc, disons que vous venez de placer cet extrait dans un fichier redirect/index.html sur votre site Web, vous pouvez l'utiliser de cette manière.

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

Et si vous allez sur ce lien, il vous redirigera automatiquement vers stackoverflow.com .

Lien vers la documentation

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

Modifier:

Il y a aussi une chose à noter. J'ai ajouté window.location.replace dans mon code car je pense que cela convient à une page de redirection, mais, vous devez savoir que lorsque vous utilisez window.location.replace et que vous êtes redirigé, lorsque vous appuyez sur le bouton Précédent de votre navigateur pas est retourné à la page de redirection, et il reviendra à la page précédente, jetez un coup d'œil à cette petite démo.

Exemple:

Le processus: stocke la maison => page de redirection vers Google => google

Quand à google: google => dans le navigateur => stocke la maison

Donc, si cela répond à vos besoins, tout devrait bien se passer. Si vous souhaitez inclure la page de redirection dans l’historique du navigateur, remplacez-la.

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

avec

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

***** LA QUESTION ORIGINALE ÉTAIT - "COMMENT REDIRIGER L’UTILISATION DE JQUERY", DÈS QUE LA RÉPONSE IMPLÉMENT JQUERY >> CAS D’UTILISATION COMPLÉMENTAIRE *****

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 pour afficher et masquer le contenu à l'intérieur ou à l'extérieur de l'élément sélectionné. Toutes ces tâches commencent par savoir comment 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 ait écrit un script/plugin de 10000 lignes de code?! Eh bien, avec jQuery, vous pouvez vous connecter à ce code avec juste une ligne ou deux.

70
SergeDirect

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";
});
70
Swaprks

Essaye ça:

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

extrait de code de l'exemple .

59
tilak

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

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

C'est aussi simple que ça!

Le meilleur moyen de lancer une requête HTTP est d'utiliser document.loacation.href.replace('URL').

54
MayorMonty

D'abord écrire 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 voulez naviguer dans les pages de votre application, j'ai aussi du code, si vous voulez.

51
Anup

Vous pouvez rediriger dans jQuery comme ceci:

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

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
44
lalithkumar

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. Ceci est une blague.

Cela "apportait une réponse à la question", en ce sens qu'il demandait une solution "utilisant jQuery", ce qui dans ce cas implique de l'introduire d'une manière ou d'une autre dans l'équation.

Ferrybig a apparemment besoin de l'explication de la blague (plaisantant toujours, je suis sûr que le formulaire d'évaluation contient peu d'options), alors sans plus tarder:

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

Cette réponse l’abuse aussi, mais d’une manière plus ridicule. Au lieu de l'utiliser pour définir l'emplacement, ceci utilise attr() pour récupérer une fonction qui définit l'emplacement.

La fonction s'appelle jQueryCode même si elle n’a rien de jQuery, et appeler une fonction somethingCode est tout simplement horrible, surtout quand quelque chose n’est même pas un langage.

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

Fondamentalement, grincer des dents.

44
1j01

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");
43
user2496033

Voici une redirection de délai. Vous pouvez régler le délai sur ce que vous voulez:

<!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>
40
Stefan Gruenwald

Il y a trois façons principales de le faire,

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

et...

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

Le dernier choix est préférable, pour une redirection classique, car il ne sauvegardera pas la page que vous avez consultée avant d’être redirigé dans votre historique de recherche. Toutefois, si vous souhaitez simplement ouvrir un onglet avec JavaScript, vous pouvez utiliser l’un des choix ci-dessus . 1

EDIT: Le préfixe window est facultatif.

37
Ben

Il me suffisait de mettre à jour ce ridicule avec encore une nouvelle méthode jQuery:

var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);
37
Epiphany

Ecrivez le code ci-dessous après la section PHP, HTML ou jQuery. Si vous vous trouvez au milieu de la section PHP ou HTML, utilisez la balise <script>.

location.href = "http://google.com"
35
Bidyut

code jQuery pour rediriger une page ou une URL

première manière

Voici le code jQuery pour rediriger une page. Depuis, j'ai mis ce code sur la fonction $ (document) .ready (), il sera exécuté dès que la page sera chargée.

var url = "http://stackoverflow.com";
$(location).attr('href',url);

Vous pouvez même passer une URL directement à la méthode attr (), au lieu d'utiliser une variable.

Deuxième manière

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

Vous pouvez aussi coder comme ceci (les deux sont identiques en interne):

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

Si vous êtes curieux de connaître la différence entre window.location et window.location.href, vous pourrez constater que le dernier définit explicitement la propriété href, tandis que l'ancien le fait de manière implicite. Étant donné que window.location renvoie un objet qui, par défaut, définit sa propriété .href.

troisième voie

Il existe un autre moyen de rediriger une page à l'aide de JavaScript, la méthode replace() de l'objet window.location. Vous pouvez transmettre une nouvelle URL à la méthode replace(), qui simulera une redirection HTTP. En passant, rappelez-vous que la méthode window.location.replace() ne place pas la page d'origine dans l'historique de session, ce qui peut affecter le comportement du bouton Précédent. Parfois, c'est ce que vous voulez, alors utilisez-le avec précaution.

// Doesn't put originating page in history
window.location.replace("http://stackoverflow.com");

quatrième voie

comme attr () méthode (après l'introduction de jQuery 1.6)

var url = "http://stackoverflow.com";
$(location).prop('href', url);
33

Dans jQuery, utilisez $(location).attr('href', url):

$(document).ready(function(){
    var url = "https://www.youtube.com/watch?v=JwMKRevYa_M";
    $(location).attr('href', url); // Using this
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Dans raw JavaScript, il existe un certain nombre de moyens pour y parvenir:

window.location.href="https://www.youtube.com/watch?v=JwMKRevYa_M";

- définit explicitement la propriété href.

window.location = "http://www.GameOfThrones.com";

- Est-ce implicite? Depuis window.location retourne un objet, qui définit par défaut sa propriété .href.

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

- remplace l'emplacement de la fenêtre en cours par la nouvelle.

self.location = "http://www.somewebsite.com";

- définit l'emplacement de la fenêtre actuelle elle-même.

Voici un exemple de redirection JavaScript après un certain temps (3 secondes):

<script>
    setTimeout(function() {
        window.location.href = "https://www.youtube.com/";
    }, 3000);
</script>
29
Inconnu

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");
29
Kalpesh Panchal

En JavaScript et jQuery, nous utilisons le code suivant pour rediriger la page:

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

Mais vous pouvez créer une fonction dans jQuery pour rediriger la page:

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

Et appelez cette fonction:

jQuery(window).redirect("http://stackoverflow.com/")
27
Muhammad Waqas

Utilisez la fonction jQuery:

$.extend({
  redirectPost: function(location, args) {
    var form = '';
    $.each(args, function(key, value) {
      form += '<input type="hidden" name="' + key + '" value="' + value + '">';
    });
    $('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
  }
});

Dans votre code, vous l'utilisez comme ceci:

$.redirectPost("addPhotos.php", {pimreference:  $("#pimreference").val(), tag: $("#tag").val()});
23
stratum

Simplement dans JavaScript, vous pouvez rediriger vers une page spécifique en utilisant les éléments suivants:

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

Ou

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

Ou

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

tilisation de jQuery:

$(window).attr("location","http://www.test.com");
17
vipul sorathiya
<script type="text/javascript">
var url = "https://yourdomain.com";

// IE8 and lower fix
if (navigator.userAgent.match(/MSIE\s(?!9.0)/))
{
    var referLink = document.createElement("a");
    referLink.href = url;
    document.body.appendChild(referLink);
    referLink.click();
}

// All other browsers
else { window.location.replace(url); }
</script>
17
Jaydeep Jadav

Javascript est très complet. Si vous voulez passer à une autre page, vous avez trois options.

 window.location.href='otherpage.com';
 window.location.assign('otherpage.com');
 //and...

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

Si vous souhaitez passer à une autre page, vous pouvez utiliser n'importe lequel de ces éléments si tel est votre souhait. Cependant, les trois options sont limitées à des situations différentes. Choisissez judicieusement selon vos exigences.

si vous êtes intéressé par plus de connaissances sur le concept. Vous pouvez aller plus loin.

window.location.href; returns the href (URL) of the current page
window.location.hostname; returns the domain name of the web Host
window.location.pathname; returns the path and filename of the current page
window.location.protocol; returns the web protocol used (http: or https:)
window.location.assign; loads a new document
17
Asif J

Vous pouvez l'utiliser comme dans le code suivant où getRequestToForwardPage est le mappage de la demande ( URL ). Vous pouvez également utiliser votre URL.

function savePopUp(){
    $.blockUI();
    $.ajax({
        url:"GuestHouseProcessor?roomType="+$("#roomType").val(),
        data: $("#popForm").serialize(),
        dataType: "json",
        error: (function() {
            alert("Server Error");
            $.unblockUI();
    }),
    success: function(map) {
        $("#layer1").hide();
        $.unblockUI();
        window.location = "getRequestToForwardPage";
    }
});

Ceci est pour le même contexte de l'application.

Si vous souhaitez utiliser uniquement du code spécifique à jquery, le code suivant peut vous aider:

 $(location).attr('href',"http://www.google.com");
 $jq(window).attr("location","http://www.google.com");
 $(location).prop('href',"http://www.google.com"); 
16
Vinay Sharma

Voici le code pour rediriger vers une autre page avec un délai d'attente de 10 secondes.

<script>
    function Redirect()
    {
        window.location="http://www.adarshkr.com";
    }

    document.write("You will be redirected to a new page in 10 seconds.");
    setTimeout('Redirect()', 10000);
</script>

Vous pouvez également le faire comme ceci, en cliquant sur un bouton en utilisant location.assign:

<input type="button" value="Load new document" onclick="newPage()">
<script>
    function newPage() {
        window.location.assign("http://www.adarshkr.com")
    }
</script>
15
Adarsh Gowda K R

Utilisation:

function redirect(a) {
    location = a
}

Et appelez-le avec: redirect([url]);

La href après location n'est pas nécessaire, comme c'est implicite.

14
cascading-style
<script type="text/javascript">
    if(window.location.href === "http://stackoverflow.com") {      
         window.location.replace("https://www.google.co.in/");
       }
</script>
14
sneha

Vous pouvez utiliser:

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

La méthode replace() n'enregistre pas la page d'origine dans l'historique de la session. Par conséquent, l'utilisateur ne peut pas revenir en arrière à l'aide du bouton Précédent et être à nouveau redirigé. NOTE: Le bouton Précédent du navigateur sera désactivé dans ce cas.

Cependant, si vous voulez un effet identique à un clic sur un lien, vous devriez choisir:

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

Dans ce cas, le bouton Précédent du navigateur sera actif.

14
madhur

Vous pouvez écrire l'URL.Action pour l'événement Bouton clic dans la section de script comme suit.

function onclick() {
        location.href = '@Url.Action("Index","Home")';
    }
13
wild coder

Vous pouvez rediriger la page en utilisant les méthodes ci-dessous:

  1. En utilisant une balise meta dans la tête - <meta http-equiv="refresh" content="0;url=http://your-page-url.com" />. Notez que content="0;... est utilisé après combien de secondes vous devez rediriger la page.

  2. En utilisant JavaScript: window.location.href = "http://your-page-url.com";

  3. En utilisant jQuery: $(location).attr('href', 'http://yourPage.com/');

13
SantoshK

C'est très facile à mettre en œuvre. Vous pouvez utiliser:

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

Cela vous rappellera l'histoire de la page précédente. On peut donc revenir en arrière en cliquant sur le bouton Précédent du navigateur.

Ou:

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

Cette méthode ne se souvient pas de l'historique de la page précédente. Le bouton de retour devient désactivé dans ce cas.

13

Application d'une seule page, au sein du même itinéraire d'application

window.location.pathname = '/stack';

JavaScript:

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

jQuery:

$(location).attr('href', "http://www.stack.com");
$(window).attr('location', "http://www.stack.com");

angulaire 4

import { Router } from '@angular/router';
export class NavtabComponent{
    constructor(private router: Router) {
    }
    this.router.navigate(['bookings/taxi']);
}
13
HD..

Je viens d'ajouter une autre façon:

Pour rediriger une page/des liens spécifiques de votre site vers une autre page, ajoutez simplement cette ligne de code:

<script>
    if(window.location.href == 'old_url')
    {
        window.location.href="new_url";
    }

    // Another URL redirect
    if(window.location.href == 'old_url2')
    {
        window.location.href="new_url2";
    }
</script>

Pour un exemple réel,

<script>
    if(window.location.href == 'https://old-site.com')
    {
        window.location.href="https://new-site.com";
    }

    // Another URL redirect
    if(window.location.href == 'https://old-site.com/simple-post.html')
    {
        window.location.href="https://new-site.com/simple-post.html";
    }
</script>

En utilisant ce code simple, vous pouvez rediriger le site complet ou une page unique.

12

Si vous préférez utiliser du javascript pur, je réalise que l'utilisation de document.location.href = "https://example.com" ou window.location.href = "https://example.com" provoque des problèmes de compatibilité dans Firefox. Essayez plutôt d'utiliser:

location.href = "https://example.com";
location.replace("http://example.com");

Dans mon cas, le problème a été résolu. Bonne chance!

J'utilise déjà la fonction redirect () de JavaScript. Ça marche.

<script type="text/javascript">
    $(function () {
        //It's similar to HTTP redirect
        window.location.replace("http://www.Technomark.in");

        //It's similar to clicking on a link
        window.location.href = "Http://www.Technomark.in";
    })
</script>
11
user1012506
  1. location.assign ():

    Pour assigner un chemin de route en y passant un chemin .. Assign vous donnera un historique même après l'attribution du chemin.

    Méthode d'utilisation: la valeur doit y être passée.

    Par exemple: location.assign("http://google.com")

    Enter image description here

  2. location.href

    Peut définir donner un chemin dedans ... Et il redirigera dans un chemin donné une fois installé, et gardera l'histoire ...

    Méthode d'utilisation: La valeur doit être affectée.

    Par exemple: location.href = "http://google.com"

  3. location.replace ():

    Il sera utile de remplacer un chemin si vous ne souhaitez pas conserver l'historique. Cela ne vous donnera pas d'historique une fois que vous aurez remplacé son chemin.

    Méthode d'utilisation: la valeur doit y être passée.

    Par exemple: location.replace("http://google.com")

    Enter image description here


assign() et href sont similaires et peuvent contenir l’historique. assign fonctionnera en transmettant une valeur et href en affectant.

Vous pouvez le réaliser en utilisant JavaScript lui-même sans utiliser jQuery en assignant,

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

Vous pouvez réaliser la même chose en utilisant jQuery comme ci-dessous. Il fera exactement comme ci-dessus,

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

Vous pouvez facilement comprendre la différence entre les deux ...

Voici l'objet Location,

Location API from chrome

11

Si vous souhaitez rediriger vers un itinéraire au sein de la même application simplement

window.location.pathname = '/examplepath'

serait le chemin à parcourir.

10
RuNpiXelruN

Utiliser location.replace() vous redirigera mais sans sauvegarder l'historique de la page précédente. Cela vaut mieux utiliser lorsqu'un formulaire est soumis. Mais lorsque vous souhaitez conserver votre historique, vous devez utiliser location.href=//path

Exemples:

// form with steps
document.getElementById('#next').onclick = function() {
   window.location.href='/step2' // iteration of steps;
}

// go to next step
document.getElementById('#back').onclick = function() {
   window.history.back();
}

// finish 
document.getElementById('#finish').onclick = function() {
   window.location.href = '/success';
}

// on success page
window.onload = function() {
    setTimeout(function() {
       window.location.replace('/home'); // i can't go back to success page by pressing the back button
    },3000);
}
10
Andrei Todorut

Tout moyen de faire une redirection du côté client:

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript and jQuery example to redirect a page or URL </title>
    </head>
    <body>
        <div id="redirect">
            <h2>Redirecting to another page</h2>
        </div>

        <script src="scripts/jquery-1.6.2.min.js"></script>
        <script>
            // JavaScript code to redirect a URL
            window.location.replace("http://stackoverflow.com");
            // window.location.replace('http://code.shouttoday.com');

            // Another way to redirect page using JavaScript

            // window.location.assign('http://code.shouttoday.com');
            // window.location.href = 'http://code.shouttoday.com';
            // document.location.href = '/relativePath';

            //jQuery code to redirect a page or URL
            $(document).ready(function(){
                //var url = "http://code.shouttoday.com";
                //$(location).attr('href',url);
                // $(window).attr('location',url)
                //$(location).prop('href', url)
            });
        </script>
    </body>
</html>
8
Zigri2612

redirection d'utilisateur à l'aide de jQuery/JavaScript

En utilisant l'objet location dans jQuery ou JavaScript, nous pouvons rediriger l'utilisateur vers une autre page Web.

En jQuery

Le code pour rediriger l'utilisateur d'une page à une autre est:

var url = 'http://www.example.com';
$(location).attr('href', url);

en JavaScript

Le code pour rediriger l'utilisateur d'une page à une autre est:

var url = 'http://www.example.com';
window.location.href = url;

O

var url = 'http://www.example.com';
window.location = url;
6
devst3r

Dans mon expérience professionnelle, JavaScript est bien mieux à rediriger.

Cela dépend de la façon dont vous voulez changer d'emplacement. Si vous souhaitez enregistrer votre site Web dans l'historique des utilisateurs, utilisez window.location.href='ur website';. Sinon, pour le faire sans vous connecter à l'historique, utilisez window.location.replace("your website");.

5
Omkaar.K

C'est comme ça que je l'utilise.

   window.location.replace('yourPage.aspx');   
   // If you're on root and redirection page is also on the root

   window.location.replace(window.location.Host + '/subDirectory/yourPage.aspx');

   // If you're in sub directory and redirection page is also in some other sub directory.
5
dnxit