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

< p id = "href" > </ p > < script > document . getElementById ( "href" ). innerHTML = "L'URL complète de cette page est:<br>" + window . location . href ; </ script > </ body > </ html > Essayez-vous-même!