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




15 Answers

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

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

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



Cela fonctionne pour tous les navigateurs:

window.location.href = 'your_url';



Je pense aussi que location.replace(URL) est la meilleure solution, mais si vous souhaitez informer les moteurs de recherche de votre redirection (ils n'analysent pas le code JavaScript pour afficher la redirection), vous devez ajouter la méta rel="canonical" tag vers votre site web.

L'ajout d'une section noscript contenant une balise méta d'actualisation HTML constitue é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 transmettre le référent HTTP.

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



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.




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:




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



Cela fonctionne avec jQuery:

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



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;



Sur votre fonction de clic, ajoutez simplement:

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});






Vous pouvez rediriger dans jQuery comme ceci:

$(location).attr('href', 'http://yourPage.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



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.




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.




Related