Comment puis-je redirect vers une autre page Web?

Comment puis-je redirect l’utilisateur d’une page à 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 mieux une redirection HTTP.

window.location.replace(...) vaut mieux que window.location.href , parce que replace() ne conserve pas la page d’origine dans l’historique de session, ce qui signifie que l’utilisateur ne sera pas bloqué bouton de fiasco.

Si vous voulez simuler quelqu’un en cliquant 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"; 

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. Préférez plutôt la solution JavaScript pure.

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

Moyen JavaScript standard pour redirect une page:

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


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


La section suivante est destinée à ceux qui utilisent HTTP_REFERER comme l’une des nombreuses mesures sécurisées (bien que ce ne soit pas une mesure de protection importante). 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 et versions inférieures afin de ne pas perdre HTTP_REFERER. Sinon, vous pouvez presque toujours utiliser window.location.href .

Tester avec HTTP_REFERER (collage, session, etc.) peut être utile pour déterminer si une requête 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 simple de test inter-navigateurs (retour à 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; } } 

Utilisation:

 // 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'; 

Cela aiderait si vous étiez un peu plus descriptif dans 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 vers laquelle vous souhaitez pouvoir accéder directement.

 1 2 3 ... 

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

Si vous voulez que les données paginées soient modifiées via AJAX, jQuery est là pour vous. Ce que vous feriez, c’est append un gestionnaire de clics à chacune des balises d’ancrage correspondant à une page différente. Ce gestionnaire de clics appelle du 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 }); }); 

Je pense aussi que location.replace(URL) est le meilleur moyen, mais si vous voulez informer les moteurs de recherche de votre redirection (ils n’parsingnt pas le code JavaScript pour voir la redirection), vous devez append le méta rel="canonical" tag à votre site Web.

Ajouter une section noscript avec une balise meta HTML refresh, est également une bonne solution. Je vous suggère d’utiliser cet outil de redirection JavaScript pour créer des redirections. Internet Explorer prend également en charge le transfert du référent HTTP.

Exemple de code sans délai ressemble à ceci:

            

Mais si quelqu’un veut redirect vers la page d’accueil, il peut utiliser l’extrait suivant.

 window.location = window.location.host 

Il serait utile que vous disposiez de trois environnements différents, à savoir le développement, le transfert et la production.

Vous pouvez explorer cet object window ou window.location en plaçant 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 affichée dans la barre d’adresse du navigateur. Toutes ces méthodes utilisent l’object Location, qui est une propriété de l’object Window. Vous pouvez créer un nouvel object Location ayant l’URL actuelle comme suit.

 var currentLocation = window.location; 

Structure de base d’une URL

 //:/ 

entrer la description de l'image ici

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

  2. hostname – Nom d’hôte spécifie l’hôte propriétaire de la ressource. Par exemple, http://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 message réseau doit être transmis lorsqu’il arrive sur un serveur.

  4. chemin d’access – Le chemin donne des informations sur la ressource spécifique de l’hôte à laquelle le client Web souhaite accéder. Par exemple, stackoverflow.com/index.html.

  5. query – Une chaîne de requête suit le composant path et fournit une chaîne d’informations que la ressource peut utiliser dans un but précis (par exemple, en tant que parameters pour une recherche ou en tant que données à traiter).

  6. hash – La partie d’ancrage d’une URL inclut le signe de hachage (#).

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

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

Maintenant Si vous voulez changer une page ou redirect l’utilisateur vers une autre page, vous pouvez utiliser la propriété href de l’object Location comme ceci

Vous pouvez utiliser la propriété href de l’object Location.

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

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

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

Vous pouvez utiliser assign () et remplacer les méthodes aussi pour redirect 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 est impossible d’utiliser le bouton “retour” 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’object de localisation en utilisant jQuery comme ceci

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

Et par conséquent, vous pouvez redirect l’utilisateur vers une autre URL.

Devrait juste être capable de définir en utilisant window.location .

Exemple:

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

Voici un post précédent sur le sujet:

Comment puis-je redirect vers une autre page Web?

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

Une citation de Jquery.com:

Bien que jQuery puisse fonctionner sans problèmes majeurs dans les anciennes versions de navigateurs, nous ne testons pas activement jQuery et ne corrige généralement pas les bogues qui peuvent y apparaître.

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

Ainsi, jQuery n’est pas une solution complète pour la rétrocompatibilité.

La solution suivante utilisant du code JavaScript brut fonctionne dans tous les navigateurs et est utilisée depuis longtemps. 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

    example   

You will be redirected to google shortly.

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 la fonction replace, le bouton Retour ne retourne pas à la page de redirection, comme si ce 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 qui permet à l’utilisateur de revenir à la page de redirection, rappelez-vous que lorsque vous entrerez dans la page de redirection, elle vous redirecta. 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 arrière sera acceptable. Mais si la page est automatiquement redirigée, vous devez utiliser la commande replace afin que l’utilisateur puisse utiliser le bouton Retour sans avoir à revenir à la page envoyée par la redirection.

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

META Refresh

  

Localisation META

  

Détournement de base

  

Beaucoup d’autres méthodes pour redirect votre client non méfiant vers une page à laquelle elles ne souhaitent pas accéder peuvent être trouvées sur cette page (aucune 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 c’est absolument nécessaire. Si vous commencez à redirect des personnes au hasard, elles ne retourneront jamais sur votre site.

La prochaine partie est hypothétique:

Vous pouvez également être signalé comme un site malveillant. Si cela se produit alors, lorsque les internautes 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 commencent à baisser votre note si les gens signalent une mauvaise expérience sur votre site.

Veuillez consulter les directives de Google Webmaster concernant les redirections: https://support.google.com/webmasters/answer/2721217?hl=fr&ref_topic=6001971

Voici une petite page amusante qui vous sort de la page.

    Go Away   

Go Away

Si vous combinez les deux exemples de pages, vous auriez une boucle de réacheminement qui garantira que votre utilisateur ne voudra plus jamais utiliser votre site.

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

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

1) En utilisant l’emplacement de remplacement , cela remplacera l’historique actuel de la page, ce qui signifie qu’il n’est pas possible d’utiliser le bouton Retour pour revenir à la page d’origine.

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

2) En utilisant l’ affectation de lieu, cela gardera l’historique pour vous et avec le bouton 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 aussi écrire une fonction dans jQuery pour le gérer, mais ce n’est pas recommandé car il ne s’agit que d’une seule fonction JavaScript, vous pouvez également utiliser toutes les fonctions ci-dessus sans fenêtre si vous êtes déjà dans 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

Cela fonctionne avec jQuery:

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

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

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

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

Vous devez uniquement utiliser JavaScript pour cela. Voici un petit code qui créera une page de redirection dynamic.

  

Donc, disons que vous venez de mettre cet extrait dans un fichier redirect/index.html 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 redirecta 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 de retour de votre navigateur, Je suis revenu à la page de redirection, et elle retournera à la page précédente, jetez un coup d’œil à cette petite démonstration.

Exemple:

Le processus: stocker la maison => redirect la page vers google => google

Quand à google: google => bouton retour dans le navigateur => magasin d’accueil

Donc, si cela répond à vos besoins, alors 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; 

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

Vous devez mettre cette ligne dans votre code:

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

Si vous n’avez pas jQuery, allez en JavaScript avec:

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

***** LA QUESTION ORIGINALE ÉTAIT – “COMMENT RÉDUIRE EN UTILISANT JQUERY”, DONT LA RÉPONSE IMPLÉMENTS JQUERY >> CAS D’UTILISATION COMPLIMENTARY *****

Pour simplement redirect 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 dans une page Web. Vous pouvez trouver tout ce que vous voulez sur une page, puis utiliser jQuery pour append des effets spéciaux, réagir aux actions de l’utilisateur ou afficher et masquer du contenu à l’intérieur ou à l’extérieur de l’élément que vous avez 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.

Essaye ça:

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

Extrait de code de l’exemple .

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’ document.loacation.href.replace('URL') .

Vous pouvez redirect dans jQuery comme ceci:

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

Commencez par écrire correctement. Vous souhaitez naviguer dans une application pour un autre lien 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.

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 

En JavaScript et jQuery, nous pouvons utiliser le code suivant pour redirect la 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 te plait ne me tue pas, c’est une blague. C’est une blague. C’est une blague.

Cela a “apporté une réponse à la question”, en ce sens qu’elle demandait une solution “utilisant jQuery” qui, dans ce cas, implique de le forcer dans l’équation.

Ferrybig a apparemment besoin de la blague expliquée (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 attr() de jQuery sur l’ location ou window objects de window inutilement.

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

La fonction s’appelle jQueryCode même si jQuery n’y est pour rien, et l’appel d’une fonction somethingCode jQueryCode est horrible, surtout quand quelque chose n’est même pas un langage.

Le “85 octets” est une référence à Code Golf. Le golf n’est évidemment pas quelque chose que vous devriez faire en dehors du golf de code, et de plus, cette réponse n’est clairement pas un golf.

Fondamentalement, grincer des dents.

Voici une redirection de délai. Vous pouvez définir le délai à ce que vous voulez:

     Your Document Title     
You will be redirected in 8 seconds!

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 est le meilleur, pour une redirection traditionnelle, car il ne va pas enregistrer la page que vous avez visité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 éléments ci-dessus. 1

EDIT: Le préfixe de la window est facultatif.

Je devais juste mettre à jour ce ridicule avec une autre méthode jQuery plus récente:

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