javascript - Comment rediriger vers une autre page Web?


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




Answers


On ne redirige pas simplement en utilisant jQuery

jQuery n'est pas nécessaire et window.location.replace(...) simule 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 la session, ce qui signifie que l'utilisateur ne sera pas bloqué dans un back-back sans fin. bouton fiasco.

Si vous voulez 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://.com");

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



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

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



Manière JavaScript "vanilla" standard pour rediriger 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 pour ceux qui utilisent HTTP_REFERER comme l'une des nombreuses mesures sécurisées (bien que ce ne soit pas une grande mesure de protection). Si vous utilisez Internet Explorer 8 ou inférieur, ces variables sont perdues lors de l'utilisation de n'importe quelle 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 utiliser window.location.href .

Les tests effectués sur HTTP_REFERER (collage d'URL, session, etc.) peuvent être utiles pour 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 simple de test cross-browser (fallback à 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 tous les navigateurs:

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, il existe certaines options dans la façon de procéder. Vous pouvez générer des liens séparés pour chaque page à laquelle vous voulez 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 traitée différemment dans le code et avec CSS.

Si vous voulez que les données paginées soient modifiées via AJAX, c'est ici que jQuery viendrait. Ce que vous feriez serait d'ajouter un gestionnaire de clic à chacune des balises d'ancrage correspondant à une page différente. Ce gestionnaire de clics appelle un code jQuery qui va et récupère 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 avertir les moteurs de recherche de votre redirection (ils n'analysent pas le code JavaScript pour voir la redirection) vous devriez ajouter la meta rel="canonical" tag sur votre site Web.

L'ajout d'une section Noscript avec une méta-balise 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 a également la prise en charge d'Internet Explorer pour transmettre le référent HTTP.

Exemple de code sans délai ressemble à ceci:

<!-- Pleace this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->



Mais si quelqu'un veut revenir à la page d'accueil, il peut utiliser l'extrait suivant.

window.location = window.location.host

Il serait utile si vous avez trois environnements différents comme développement, mise en scène et production.

Vous pouvez explorer cet objet fenêtre ou window.location en plaçant simplement ces mots dans la console Chrome ou dans la console de Firebug .




JavaScript vous fournit plusieurs 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 dont l'URL actuelle est la suivante.

var currentLocation = window.location;

Structure de base d'une URL

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

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

  2. hostname - Le nom d'hôte spécifie l'hôte qui possède la ressource. Par exemple, www..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 un autre message réseau doit être transféré lorsqu'il arrive sur un serveur.

  4. pathname - Le chemin donne des informations sur la ressource spécifique dans l'hôte auquel le client Web veut accéder. Par exemple, .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 certains cas (par exemple, en tant que paramètres pour une recherche ou en tant que données à traiter).

  6. hash - La partie ancre d'une URL, inclut le signe dièse (#).

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 d'ancrage d'une URL.
  2. host -Sets ou retourne le nom d'hôte et le port d'une URL.
  3. hostname - Définit ou retourne le nom d'hôte d'une URL.
  4. href - Définit ou retourne l'intégralité de l'URL.
  5. pathname - Définit ou retourne le nom du chemin d'accès d'une URL.
  6. port -Sets ou retourne le numéro de port utilisé par le serveur pour une URL.
  7. protocol -Sets ou retourne le protocole d'une URL.
  8. search - Définit ou retourne la partie de 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..com";

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

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

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

Comment assign () et replace () diffèrent - La différence entre la méthode replace () et assign () method (), 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 original. Utilisez donc la méthode assign () si vous voulez charger un nouveau document, et vous voulez donner la possibilité de revenir au document d'origine.

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

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

Et donc vous pouvez rediriger l'utilisateur vers une autre URL.







Avant de commencer, jQuery est une bibliothèque JavaScript utilisée pour la manipulation DOM. Vous ne devriez donc 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 corrigeons 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 de fin en fin de compte pour la rétrocompatibilité.

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

Cette page redirigera 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 le remplacement, le bouton de retour ne retournera pas à la page de redirection, comme si elle n'avait jamais été 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, n'oubliez pas que lorsque vous entrez dans la page de redirection, il vous redirigera vers l'arrière. Donc, mettez cela en considération lors du choix d'une option pour votre redirection. Dans des conditions où la page redirige seulement quand une action est faite par l'utilisateur alors avoir la page dans l'histoire arrière de bouton ira bien. Mais si la page redirige automatiquement, vous devez utiliser remplacer pour 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 des métadonnées pour exécuter une redirection de page comme suit.

META Actualiser

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

META Où nous trouver

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

BASE Hijacking

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

Beaucoup d'autres méthodes pour rediriger votre client peu méfiant vers une page qu'ils ne souhaitent pas aller peuvent être trouvées sur cette page (pas une d'entre elles 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. Ne redirigez les gens que lorsque cela est absolument nécessaire. Si vous commencez à rediriger les gens au hasard, ils ne se rendront plus sur votre site.

La partie suivante est hypothétique:

Vous pouvez également être signalé comme un site malveillant. Dans ce cas, 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 aussi arriver, c'est que les moteurs de recherche peuvent commencer à perdre votre note si les gens rapportent 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=fr&ref_topic=6001971

Voici une petite page amusante qui vous envoie hors 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 aurez une boucle de redirection infantile qui garantira que votre utilisateur ne voudra plus jamais utiliser votre site.




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



Vous pouvez le faire sans jQuery comme:

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

Et si vous voulez seulement jQuery alors vous pouvez le faire comme:

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



Cela fonctionne avec jQuery:

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



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

Essayez cet exemple de code:

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

Si vous voulez donner une URL complète comme window.location = "www.google.co.in"; .




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

Vous avez seulement besoin d'utiliser JavaScript pour cela. Voici un petit code qui va créer 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 mettre cet extrait dans un fichier de redirect/index.html sur votre site web, vous pouvez l'utiliser comme ça.

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

Et si vous allez sur ce lien, il vous redirigera automatiquement vers .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 parce que 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 dans votre navigateur, il ne sera pas Revenez à la page de redirection, et il reviendra à la page avant, jetez un oeil à cette petite chose de la démo.

Exemple:

Le processus: store home => rediriger la page vers google => google

Quand à google: google => bouton retour dans le navigateur => magasin de la maison

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

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



Fondamentalement jQuery est une bibliothèque JavaScript et pour faire certaines choses comme la redirection, vous pouvez utiliser du JavaScript pur, donc dans ce cas, vous avez 3 options en utilisant le JavaScript de 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 de retour pour revenir à la page d'origine.

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

2) En utilisant l' assignation d' emplacement, ceci gardera l'histoire pour vous et avec le bouton de retour, vous pouvez retourner à la page d'origine:

window.location.assign("http://.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://.com";

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

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







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




Vous devez mettre cette ligne dans votre code

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

Si vous n'avez pas le Jquery, rendez-vous avec javascript avec

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



D'abord écrire correctement. Vous voulez 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.




Vous pouvez rediriger dans jQuery comme ceci:

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



Pour simplement rediriger vers une page:

  window.location.href = "/destination.html";

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

setTimeout(function () {
  window.location.href = "/destination.html";
}, 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 dans 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 comment sélectionner un élément .

function redirect () {
    $('selection').animate({
        marginLeft: 100px; //Put some CSS animation here
    }, 500, function () {
      // OK, finished jQuery staff, let's go redirect
      window.location.href = "/destination.html";
})

Imaginez quelqu'un a écrit un script / plugin qui est 10000 lignes de code ?! Eh bien, avec jQuery vous pouvez vous connecter à ce code avec juste une ligne ou deux.




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

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



ECMAScript 6 + jQuery, 85 octets

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

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

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

Ferrybig a apparemment besoin de la blague expliquée (plaisante encore, je suis sûr qu'il y a des options limitées sur le formulaire d'avis), donc sans plus tarder:

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

Cette réponse abuse aussi, mais d'une 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 s'il n'y a rien de jQuery à ce sujet, et appeler une fonction somethingCode jQueryCode est juste horrible, surtout quand le 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 jouée au golf.

Fondamentalement, grincer des dents.




Voici une redirection temporisée. Vous pouvez définir le temps de retard à 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>



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



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



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 sauvera pas la page que vous avez visité avant d'être redirigé dans votre historique de recherche. Cependant, si vous voulez 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.