Comment rediriger vers une autre page Web?

7723

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

venkatachalam
la source
147
Je continue de voir les deux window.location = url; et window.location.href = url; Comment sont-ils différents? Sont-ils? BTW, je ne connaissais pas window.location.replace (url). Agréable.
David M. Miller
100
window.locationest le même que window.location.href, en termes de comportement. window.locationrenvoie un objet. Si .hrefn'est pas défini, la valeur par window.locationdéfaut est de modifier le paramètre .href. Concluez: Utilisez l'un ou l'autre est très bien.
Raptor
10
var url = "nom du site Web" $ (location) .attr ('href', url);
Mad Scientist
31
@MadScientist C'est une façon inversée de le faire. L'objet location n'est pas un élément HTML et l'utilisation de l'objet jquery pour le définir semble tout simplement incorrecte. Pourquoi utiliseriez-vous cela alors que le code JS simple est si simple?
Juan Mendes
1
Pourquoi voulez-vous rediriger? Le formulaire de connexion ne doit pas être soumis? Et même s'il n'y a pas de logique dans la page cible, vous pourrez toujours soumettre le formulaire à une autre page.
Dimt

Réponses:

14810

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";
Ryan McGeary
la source
78
en cas de bouton d'envoi, ajoutez return false; également à l'intérieur de votre fonction
Abhi
134
La question concerne spécifiquement le javascript, mais il peut être utile de noter qu'un rafraîchissement méta peut être utilisé comme un retour en arrière au cas où l'utilisateur aurait désactivé le javascript
Hoppe
22
@ NicolòMartini If (IE) document.write ("");
Jeff Noel
48
Si vous utilisez déjà jQuery, utilisez simplement $(location).attr('href',url);. window.location.hrefsemble avoir un comportement inconstant dans certains navigateurs, en fait, ça ne marche pas du tout dans ma version de Firefox. J'ai entendu dire que la configuration window.locationne fonctionnait pas directement dans les versions d'IE.
Noz
8
"c'est mieux" devrait être supprimé. Comme indiqué plus loin dans la réponse, la meilleure solution est situationnelle. OP ne demande pas "comment puis-je émuler une redirection HTTP avec Javascript ..."
MadMaardigan
1685

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')
Boris Guéry
la source
63
C'est cette réponse littérale à la question. Si vous utilisez déjà Jquery et que vous l'avez donc déjà chargé, la bande passante sera plus efficace et bien sûr plus claire pour utiliser le raccourci
barrymac
27
Plus important encore, existe-t-il un moyen de le faire avec jQuery qui est absent? Ceci est juste un wrapper pour window.location.href = url; Mais si jQuery avait une fonction, if window.location.href = url; n'allait pas fonctionner dans l'environnement actuel (navigateur, OS, etc.) le noyau jQuery pourrait compenser?
Chris
271
Forcer jQuery dans l'équation de cette manière est juste ridicule et inutile, d'autant plus qu'il window.locationn'est pas un élément et n'a donc pas d'attributs.
Tim Down du
10
Je doute que cela fonctionne toujours avec les versions récentes de jQuery où .attr()définit réellement les attributs (ie .setAttribute())
ThiefMaster
156
@deltaray Ce n'est pas une autre façon de rediriger, comme dit ci-dessus, c'est un wrapper vide de sens autour de l'objet de localisation, qui n'est même pas un élément! Cela me rappelle i.stack.imgur.com/ssRUr.gif
JCM
676

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; 
    }
}
Mark Pieszak - Trilon.io
la source
60
Note de bas de page: rechercher un référent comme mesure de sécurité est une mauvaise solution. duckduckgo.com/?q=referrer+spoofing
droope
Si vous avez un ID de session HTTP GET dans l'URL de référence, il peut être utilisé pour vérifier sa validité par rapport à la session.
Andrew Fox
@mcpDESIGNS êtes-vous sûr que vous avez essayé d'utiliser location.assign? J'utilise dans mon application avec IE8, et je ne perds pas l'en- HTTP_REFERERtête.
Buzinas
Au moins en 2012, cela ne fonctionnait pas, peut-être que des correctifs ultérieurs d'IE8 l'ont corrigé - c'est bien d'entendre quand même!
Mark Pieszak - Trilon.io
1
Votre mention de HTTP_REFERER m'a aidé à comprendre le problème que j'ai avec window.open et j'ai trouvé une solution ici: stackoverflow.com/questions/7580613/… . Au fait, j'ai un problème avec IE11!
Dov Miller
427

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')
Govind Singh
la source
8
window.navigateest ancien uniquement IE (Firefox / Chrome ne le prend pas en charge). Si vous souhaitez énumérer toutes les options, n'oubliez pas document.location.
Rob W
document.location = document.referrer; Veuillez également l'ajouter dans la liste. Cela ne fonctionne pas comme History.back, mais plutôt la page Actualiser à nouveau.
Ali Humayun
.attr () ne fonctionnera pas sur jQuery 3.0.0. utilisez plutôt .val ().
Rivalus
4
@ LéoLam C'est pourquoi il existe un moteur de recherche appelé Google. :-) Vous pouvez rechercher chacun sur Google et trouver la différence. Vous ne voulez pas en choisir un au hasard.
Je suis la personne la plus stupide du
Vous pouvez également voir des documents, developer.mozilla.org/en-US/docs/Web/API/Location
John Balvin Arias
330

Cela fonctionne pour chaque navigateur:

window.location.href = 'your_url';
Fred
la source
8
Vous pouvez également le faire document.location.replace(redirectURL)si vous ne voulez pas que la première page soit dans l'historique du navigateur
jazzcat
298

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
    });
});
tvanfosson
la source
252

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 -->
Patartics Milán
la source
228

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 .

Nadeem Yasin
la source
window.location.replace (window.location.protocol + "//" + window.location.host)
moala
13
encore plus simple: window.location = '/'
Iftah
213

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>

entrez 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. 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.

Nikhil Agrawal
la source
203

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:

location.replace location.assign

Alireza
la source
1
Je recommande d' utiliser assign()plus href=aussi que celui - ci ne fonctionnait pas correctement pour moi dans certains cas.
marsze
169

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.

Patrick W. McMahon
la source
5
J'adresse sa demande pour jQuery en disant que ce n'est pas nécessaire. JQuery a beaucoup de grands raccourcis utiles pour JavaScript mais il n'y a pas besoin de raccourcis pour les redirections. JQuery est juste JavaScript. Rien de plus. La façon normale d'appeler une redirection fonctionnera avec ses fonctions en utilisant jQuery.
Patrick W. McMahon
165
var url = 'asdf.html';
window.location.href = url;
Ben Lee
la source
145

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");
Scorpion
la source
JQuery est sans doute une meilleure idée car elle pourrait éliminer les modifications / dépréciations futures du navigateur
Epirocks
@Epirocks S'il y avait une API dans jQuery conçue pour cela, cela pourrait être une raison valable (bien qu'il soit douteux que cette API changerait jamais), mais l'exemple ici utilise simplement une fonctionnalité de jQuery où vous pouvez encapsuler des objets non DOM et certaines méthodes fonctionnent toujours.
1j01
Le fait que «certaines méthodes fonctionnent toujours» est exactement ce que je veux dire par abstraction. Oui, vous pouvez le faire sans JQuery, mais vous pouvez tout faire sans JQuery, c'est en plus du point.
Epirocks
144

Cela fonctionne avec jQuery:

$(window).attr("location", "http://google.fr");
xloadx
la source
Ce n'est pas parce que cela fonctionne que vous devez le faire. Ceci est une indirection inutile autour du réglagewindow.location
1j01
89

# 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";.

Sakthi Karthik
la source
"Utiliser jQuery" est um, inexact. Et l'exemple de l'utilisation d'une URL complète ne fonctionnera pas, car ce n'est pas une URL complète. Il n'y a pas de protocole, il sera donc interprété comme une URL relative.
1j01
80

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");
Ashish Ratan
la source
80

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.

SergeDirect
la source
En-tête Javascript: est-il possible de faire le temps en secondes à la place?
PythonMaster202
79

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;
iConnor
la source
74

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";
});
Swaprks
la source
57

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').

MayorMonty
la source
52

É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.

Anup
la source
52

Vous pouvez rediriger dans jQuery comme ceci:

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

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");
Peter Mortensen
la source
45

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.

1j01
la source
45

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
lalithkumar
la source
1
Y a-t-il une raison pour stocker l'URL dans jQuery en tant que variable, mais pas avec Vanilla?
ESR du
43

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");
Kalpesh Panchal
la source
41

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>
Stefan Gruenwald
la source
5
mieux faire ceci: setTimeout (function () {window.location.href = " google.com "}, délai);
dikkini
39

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.

Ben
la source