javascript - temporisation - Comment puis-je rediriger vers une autre page Web?




rediriger vers une page html (20)

AVERTISSEMENT: 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')

https://code.i-harness.com

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


Méthode 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 destinée à ceux qui utilisent 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 antérieure, ces variables sont perdues lors de l’utilisation d’une forme quelconque 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 utiliser window.location.href .

Les tests sur HTTP_REFERER (collage d'URL, session, etc.) peuvent être utiles pour indiquer si une demande est légitime. ( Remarque: il existe également des moyens de contourner / parrainer ces sites référencés, 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; 
    }
}

On ne redirige pas simplement en utilisant jQuery

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

window.location.replace(...) est préférable à window.location.href , car replace() ne conserve pas la page d'origine dans l'historique de session, ce qui signifie que l'utilisateur ne restera pas coincé dans un arrière-plan sans fin bouton fiasco.

Si vous souhaitez simuler quelqu'un qui clique 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";

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


Cela fonctionne avec jQuery:

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

Cela fonctionne pour tous les navigateurs:

window.location.href = 'your_url';

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


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. Dans ce cas, vous avez 3 options en utilisant le JavaScript vanille:

1) L’utilisation de l’emplacement de remplacement remplacera l’historique actuel de la page, ce qui signifie qu’il est impossible d’utiliser le bouton Précédent pour revenir à la page d’origine.

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

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

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 é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://.com"); pourrait être location.replace("http://.com");

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


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

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>

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

Emplacement Objet 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..com");

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

Comment assign () et replace () diffèrent - 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 original. 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 modifier la propriété href de l'objet location à l'aide de jQuery également comme ceci

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

Et par conséquent, vous pouvez rediriger l'utilisateur vers une autre 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

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://.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 car je pense que cela convient à une page de redirection, mais vous devez savoir qu'en utilisant window.location.replace et que vous êtes redirigé, vous n'appuyez pas sur le bouton Précédent de votre navigateur. retourné à la page de redirection, et il reviendra à la page précédente, jetez un oeil à cette petite démo.

Exemple:

Le processus: store home => page de redirection vers google => google

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

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;

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 la console de Firebug .


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>

Vous devez mettre cette ligne dans votre code:

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

Si vous n'avez pas jQuery, utilisez JavaScript:

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

Vous pouvez rediriger dans jQuery comme ceci:

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

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


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

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 pas besoin de bibliothèques pour la prise en charge de plusieurs navigateurs.

Cette page sera redirigée vers google.com 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/" />

META Localisation

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

La partie suivante 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=en&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.


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




redirect