[javascript] Comment rediriger vers une autre page Web?



Answers

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

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




Cela fonctionne avec jQuery:

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



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




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 .




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.




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.




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



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



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:




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.




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;



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






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



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.




Related