JS : Les URL, redirection, chemin, ancre, arguments GET
Julien MA Jacob - Développeur WordPress

Dans cet article, nous voyons tout ce qui concerne les URL avec JavaScript. Comment faire une redirection vers une URL. Comment récupérer et enregistrer l'URL dans une variable, ou encore récupérer une partie de celle-ci. Nous verrons comment récupérer le protocole utilisé, le nom de domaine, le chemin de la page, l'ancre et les paramètres passés dans cette URL.

Les URL en JavaScript : Les redirections

Il y a deux possibilités pour faire une redirection en JavaScript. La première est équivalente à un clic tandis que la seconde est similaire à une redirection HTTP. il est possible d'exprimer une URL absolue comme https://monsite.fr/chemin/page.html ou monsite.fr/chemin/page.html, ou des URL relative comme chemin/pahe.html.

// Similar as an HTTP redirect
window.location.replace("https://my-website.fr/");

// Similar as clicking on a link
window.location.href = "https://my-website.fr/";

Les URL en JavaScript : Récupérer l'URL

Pour pouvoir récupérer et traiter les informations relatives à l'URL, nous allons utiliser l'objet window.location proposé par défaut dans JavaScript. Vous pouvez obtenir l'URL de la page sur laquelle le JavaScript est exécuté comme ci-dessous. La variable contiendra alors l'URL sous la forme https://monsite.fr/.

var url = window.location.protocol + "//" + window.location.host + window.location.pathname;

URL en JavaScript : Récupérer le protocole (HTTP, HTTPS, FILE...)

si ce code est exécuté sur une page ayant l'URL https://monsite.fr, alors la variable protocole aura la valeur "https".

var protocol = window.location.protocol;

URL en JavaScript : Récupérer le nom de domaine

si ce code est exécuté sur une page ayant l'URL https://monsite.fr/chemin/page.html, alors la variable path aura la valeur "monsite.fr".

var host = window.location.host;

URL en JavaScript : Récupérer le chemin de l'URL

si ce code est exécuté sur une page ayant l'URL https://monsite.fr/chemin/page.html, alors la variable path aura la valeur "chemin/page.html".

var path = window.location.pathname;

Vous pouvez aussi récupérer chaque élément du chemin dans un tableau avec le code suivant.

var pathArray = window.location.pathname.split( "/" );

URL en JavaScript : Récupérer l'ancre

si ce code est exécuté sur une page ayant l'URL https://monsite.fr/chemin/page.html#mon-ancre, alors la variable path aura la valeur "#mon-ancre". Vous pouvez retirer simplement le dièse ("#") en utilisant window.location.hash.substr(1).

ariable path aura la valeur "#mon-ancre". Vous pouvez retirer simplement le dièse ("#") en utilisant window.location.hash.substr(1).

var path = window.location.hash;

URL en JavaScript : Récupérer les arguments de l'URL, équivalent à $_GET en PHP

Pour récupérer les arguments potentiellement présents dans l'URL, le JavaScript propose la variable window.location.search. Si l'URL ne contient pas d'arguments, elle sera vide. Sinon, elle contiendra une chaîne de caractères formatée comme suit : ?arg1=value1&arg2=value2.

Il est possible de traiter cette chaîne de caractère pour la transformer en tableau, et ainsi l'utiliser plus simplement. Une fois que le code ci-dessous est exécuté, il permet de récupérer les arguments passés dans l'URL et de les enregistrer dans le tableau $_GET .

var $_GET = [];
var parts = window.location.search.substr(1).split("&");
for (var i = 0; i < parts.length; i++) {
    var temp = parts[i].split("=");
    $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}

console.log($_GET);

URL en JavaScript : Recharger la page

Pour recharger la page en cours, il suffit d'utiliser la commande ci-dessous :

location.reload();

Julien MA Jacob - Développeur WordPress
Développeur expert WordPress
Julien MA Jacob - Développeur WordPress

Passionné par le web et la programmation. Je propose mes services de développeur pour vos sites WordPress

  Les chapitres // JavaScript / JS 🔥 Guide du développeur
JS : Les commentaires

Voyons comment les commentaires permettent d'annoter le code JS avec les syntaxes // ... et /* ... */

JS : Les opérateurs

Les opérateurs arithmétiques, d'incrémentation / décrémentation, de comparaisons, logiques et d'affectations en JS

JS : Les conditions SWITCH

La condition SWITCH permet d'exécuter certains codes en fonction de la valeur d'une variable passée en paramètre

JS : Les conditions ternaires

Les ternaires en JS sont des conditions qui suivent le schéma SI ... SINON SI ... SINON, avec une syntaxe bien plus courte qu'une condition IF ... ELSE IF ... ELSE mais aussi plus limitée

JS : Les boucles FOR

La boucle FOR permet d'exécuter un code une ou plusieurs fois en fonction de la condition qui lui est passée en paramètre