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



de bouton (25)

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://stackoverflow.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://stackoverflow.com");

3) Je recommande d'utiliser l'une de ces méthodes précédentes, mais cela pourrait être la troisième option utilisant du JavaScript pur:

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

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

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

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


Vous pouvez le faire sans jQuery en tant que:

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

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

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

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://.com')

Vous pouvez rediriger dans jQuery comme ceci:

$(location).attr('href', 'http://yourPage.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 propriétaire 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 réseau doit être transféré 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 d'accès et fournit une chaîne d'informations que la ressource peut utiliser à certaines fins (par exemple, en tant que paramètres de 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. pathname -Set ou retourne le nom de chemin 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");

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


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 fonctionner 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 bugs 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é 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"

Lorsque vous utilisez le remplacement, 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 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. 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/" />

Vous trouverez de nombreuses autres méthodes pour rediriger votre client sans méfiance vers une page à laquelle elles ne souhaitent pas aller, qui peuvent être trouvées sur cette page (aucune d’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éorienter les personnes uniquement lorsque cela est absolument nécessaire. Si vous commencez à rediriger des personnes au hasard, elles ne seront plus jamais consultées 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 boucle de redirection qui garantira que votre utilisateur ne voudra plus jamais utiliser votre site.


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

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


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

Vous devez uniquement 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 faites 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;

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

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

et...

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

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

EDIT: Le windowpréfixe est optionnel.


Vous devez mettre cette ligne dans votre code:

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

Si vous n'avez pas jQuery, utilisez JavaScript avec:

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

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

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>

Je viens juste de mettre à jour ce ridicule avec encore une nouvelle méthode jQuery:

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

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

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 aux personnes utilisant HTTP_REFERER comme une des nombreuses mesures sécurisées (bien que ce ne soit pas une mesure de protection efficace). Si vous utilisez Internet Explorer 8 ou 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 & lower 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 référents, comme indiqué par le lien de droop dans les commentaires)

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

Utilisation: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

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

Mais si quelqu'un veut rediriger sa page d'accueil, il peut utiliser l'extrait de code suivant.

window.location = window.location.host

Il serait utile de disposer de 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 .



Cela fonctionne pour tous les navigateurs:

window.location.href = 'your_url';

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 "apportait une réponse à la question", dans le sens où il demandait une solution "utilisant jQuery", ce qui dans ce cas implique de l'introduire de force dans l'équation.

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

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

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

La fonction est nommée jQueryCode même si elle n’a rien de jQueryCode , et appeler une fonction est somethingCode horrible, surtout si ce n’est pas un langage.

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

Fondamentalement, grincer des dents.



D'abord écrire correctement. Vous souhaitez naviguer dans une application pour un autre lien à partir de votre application pour un autre lien. Voici le code:

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

Et si vous voulez naviguer dans les pages de votre application, j'ai aussi du code, si vous voulez.


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

var timestamp = Number(new Date()); // current time as number




javascript jquery redirect