Aller au contenu

Comment effectuer des redirections JavaScript avec l’objet location

L’objet location est souvent utilisé avec JavaScript effectuer des redirections automatiques.

Découvrez le cours vidéo ci-dessous pour mettre en place l’objet location dans votre code JavaScript.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment effectuer des redirections JavaScript avec l’objet location

Bonjour à tous et bienvenu sur Développement Facile.

Le thème de ce nouveau cour dédié à JavaScript c’est l’objet location, si vous avez bien suivi les cours précédents dédiés à JavaScript, l’objet location vous devez déjà le connaitre, il doit vous parler. Je vous ai, par exemple, montré un exemple pour faire une redirection d’URL avec l’objet location, je vous l’ai présenté dans des cours quand j’ai présenté l’objet window, donc si vous ne le connaissez pas vous pouvez vous référer aux cours précédents, ou je parle de l’objet location, et sinon là on va entrer un peu plus dans le détail.

L’objet location

L’objet location contient l’URL courante. Il est possible avec votre code JavaScript, de récupérer l’URL de la page et de la modifiée, pour charger une nouvelle page, comme je vous l’ai montré dans un exemple, vous pouvez effectuer une redirection de page grâce à l’objet location. Vous avez plusieurs propriétés h c’est la chaîne de caractères qui représentent l’ancre dans une page, host c’est le nom de domaine de l’URL, son numéro du port, si vous avez fait attention mais des fois surtout dans les sites Intranet des entreprises, on navigue avec un nom de domaine, bien évidemment, mais avec un numéro de port, : 360 , 8080 etc. Là c’est juste le nom de domaine sans le numéro du port, c’est très pratique host, host name c’est le nom de domaine avec le numéro du port, href vous récupérez l’URL complète, et pathname vous récupérez le chemin après le nom de domaine, vous avez votre nom de domaine, et le pathname que vous récupérez juste après.

L’objet location : les propriétés

Je vous montre un exemple port, ça va vous permettre de récupérer le numéro du port de l’URL donc là vous voyez avec host, hostname, protocole c’est le protocole utilisé, donc file si vous êtes en réseau local, sinon http ou https sur un serveur Web. Search ça va vous permettre de rechercher une chaîne de caractères à partir du ?, typiquement pour récupérer les variables d’un GET, on a un formulaire si vous passez les variables dans un GET ça les passent dans l’URL après le ?, avez search vous pourrez récupérer ces variables.

L’objet location : les méthodes

Reload, ça correspond au bouton actualiser du navigateur, ça recharge la page actuelle, et replace, ça remplace le modèle de la page actuelle par une autre URL. Il faut savoir que l’URL que vous allez mettre là elle n’est pas stockée dans l’historique de navigation, l’objet history, donc je vous renvoie au cours précédent sur l’objet history si vous voulez en savoir plus.

L’objet location

Un exemple pour afficher les informations sur le navigateur, vous pouvez afficher le nom de domaine avec Window.location.hotname, le chemin de la page actuelle avec window.location.pathname, le protocole utilisé file http ou https avec Window.location.protocole et l’URL complet de la page actuelle avec window.location.href, Là je l’ai vu en commentaire mais si vous dé-commentez cette ligne ça fera window.location.href, ça va faire une redirection directement vers le nom de domaine dev-facile.com.

Votre plan d’actions !

Là on a fait le tour de l’objet location, très pratique pour déterminer l’URL de la page actuelle, effectuer une redirection ou alors si vous avez des applications en JavaScript, des jeux JavaScript HTML 5, vous pouvez vérifier le nom de domaine sur lequel s’exécute votre application, et du coup ça va vous permettre de faire des statistiques très détaillées sur les internautes qui utilisent vos applications. Retrouver un exemple de code source directement sous ce cours vidéo, si vous avez des questions, posez-les moi directement sous ce cours vidéo également dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source JavaScript

Retrouvez un exemple de code source JavaScript pour utiliser l’objet location.

Téléchargement du code source Exemple JavaScript avec location

Cliquez ici pour télécharger le code source Exemple JavaScript avec location

Dans quels cas, utilisez-vous location ?

Dites-moi, dans les commentaires, les cas typiques d’utilisation d’une redirection avec location (il y a aussi header en php).

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>