Comment Obtenir l'URL Actuelle en JavaScript
En JavaScript, il y a plusieurs méthodes pour obtenir l’URL actuelle affichée dans la barre d’adresse. Toutes les méthodes utilisent un objet Location (contient d’informations sur l’URL actuelle), qui est une propriété de l’objet Window (fournit l'adresse de la page en cours (URL) et redirige le navigateur vers une nouvelle page).
La propriété de la lecture-seule Window.location renvoie un objet Location contenant des informations sur l'emplacement actuel du document.
Avant de comprendre comment accéder à l’URL complète ou à ses composants, jetons un coup d’œil à une structure d’URL de base:
<protocol>//<hostname>:<port>/<pathname><search><hash>- protocol - le nom du protocole utilisé pour accéder au ressource sur l’Internet. (HTTP, HTTPS, FTP, etc)
- hostname - un hôte qui possède le ressource.
- port - numéro de port utilisé pour reconnaître un processus spécifique auquel un message Internet ou autre message réseau doit être transmis lorsqu'il arrive sur un serveur (la plupart des URL HTTP omettent le numéro de port).
- pathname - la ressource spécifique dans l'hôte à laquelle le client Web souhaite accéder.
- query - fournit une chaîne d'informations que la ressource peut utiliser dans un but précis (par exemple, en tant que paramètres pour une recherche ou en tant que données à traiter).
- hash - la partie d'ancrage d'une URL inclut le signe de hachage (#).
Utilisez les propriétés d'objet Location suivantes pour accéder à l'URL complète ou à ses composants.
- window.location.href - pour obtenir l’URL complète
- window.location.host - pour obtenir le nom d'hôte et le port de l'URL
- window.location.hostname - pour obtenir le nom d'hôte de l’URL
- window.location.protocol - pour obtenir le protocole de l’URL dans la barre d’adresse.
- window.location.pathname- pour obtenir le chemin et le nom de fichier de la page en cours
- window.location.search - pour obtenir la partie requête de l'URL
- window.location.hash- pour obtenir la partie d'ancrage de l'URL
Utilisez la propriété window.location.href pour obtenir l’URL complète de la page actuelle:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p id="href"></p>
<script>
document.getElementById("href").innerHTML = "L'URL complète de cette page est:<br>" + window.location.href;
</script>
</body>
</html>