Coupe une chaîne en segments
Définition et utilisation de l’Objet Location
L'objet location contient des informations sur l'URL actuelle.
L'objet location fait partie de l'objet window et est accessible via la propriété window.location.
Remarque
: Il n'y a aucune norme publique qui s'applique à l'objet de
location, mais il est pris en charge par tous les principaux
navigateurs.
Propriétés de l'objet location
| Propriété | Description |
|---|---|
| hash | Retourne la portion de l'ancrage d'une URL |
| host | Retourne le nom et le port de l’hôte de l’URL |
| hostname | Retourne le nom de l’hôte de l’URL |
| href | Retourne l’URL |
| pathname | le nom de chemin d'accès d'une URL |
| port | retourne le numéro de port |
| protocol | Retourne le protocol de l’URL |
| search | Retourne la requette de l’URL |
Méthodes Object Location
| Méthode | Description |
|---|---|
| assign() | Charge un nouveau document |
| reload() | Recharge le document courant |
| replace() | Remplace le document current avec un nouveau |
Les propriétés de l’objet location
La propriété hash : Comment utiliser la propriété Location.hash
La propriété hash retourne la portion de l'ancrage d'une URL, y compris le signe dièse (#).
Syntaxe
location.hash
Appui de navigateur
La propriété hash est prise en charge dans tous les principaux navigateurs.
Exemple Retourner la portion de l'ancre d'une URL.
Supposons que l'URL courante est http://www.exemple.com/test.html#section2 :
Exemple : 📋 Copier le code
<script> document.write(location.hash); </script>
Le résultat du code ci-dessus sera :
#section2
La propriété hash peut aussi ajouter de nouvelles valeurs ancre qui modifient l'URL actuelle.
Exemple modifie l'URL en ajoutant un ancre à l’url
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple modifier l'url en ajoutant une ancre</title>
</head>
<body>
<p id="dmo">Cliquez sur le bouton pour ajouter une ancre à l'URL.</p>
<p id="dmo1"></p>
<button onclick="maFonction()"> Voir </button>
<script>
function maFonction()
{
document.location.hash = "section2";
document.getElementById("dmo1").innerHTML= "Regarder la barre d'adresse de votre explorateur l'ancre "+location.hash+" a été ajouter à l'URL";
}
</script>
</body>
</html>
La propriété host
La propriété host spécifie ou extrait le nom de l'hôte et le port de l'URL affectée à l'objet..
Syntaxe
location.host
Appui de navigateur
La propriété host est prise en charge dans tous les principaux navigateurs.
Exemple obtenir le nom d'hôte et le port de l'URL actuelle :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple obtenir l'hote de l'url courante</title>
</head>
<body>
<p id="dmo1"></p>
<script>
document.getElementById("dmo1").innerHTML= "L'hote de cette URL est : "+location.host;
</script>
</body>
</html>
La propriété hostname
La propriété hostname retourne le nom d'hôte d'une URL.
Syntaxe
location.hostname
Appui de navigateur
La propriété hostname est prise en charge dans tous les principaux navigateurs.
Exemple Retourne le nom d'hôte de l'URL actuelle :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple analyse d'une adresse URL</title>
<script type = "text/javascript" >
function Analyser() {
var anchor = document.getElementById("dmo");
var message = "" ;
message += "Le hostname du lien est : " + anchor.hostname ;
alert (message);
}
</script >
</head >
<body>
<a href =
"https://www.oujood.com/js/construction-du-code-javascript.php" id ="dmo" > Un lien </a >
<br/><br/>
<button onclick = "Analyser();"> Voir</button >
</body>
</html>
La propriété href
La propriété href retourne l'ensemble de l'URL de la page actuelle.
Syntaxe
location.href
Appui de navigateur
La propriété href est prise en charge dans tous les principaux navigateurs.
Exemple Retourne l'URL complète (de la page en cours) :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple affichage d'une adresse URL</title>
</head >
<body>
<script type = "text/javascript" >
document.write("L'url complete de cette page est : "+location.href);
</script >
</body>
</html>
La propriété pathname
La propriété pathname retourne le nom de chemin d'accès d'une URL.
Syntaxe
location.pathname
Appui de navigateur
La propriété pathname est prise en charge dans tous les principaux navigateurs.
Exemple Retourne le nom de chemin d'accès de l'URL actuelle :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Exemple affichage du pathname d'une URL</title> </head > <body> <script type = "text/javascript" > document.write(location.pathname); </script > </body> </html>
La propriété port
La propriété port retourne le numéro de port, que le serveur utilise pour une URL.
Remarque : Si le numéro de port est 80 (ce qui est le numéro de port par défaut), il n'est pas spécifié.
Syntaxe
location.port
Appui de navigateur
La propriété port est prise en charge dans tous les principaux navigateurs.
Exemple Retourne le numéro de port de l'URL actuelle :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Exemple affichage du port</title> </head > <body> <script type = "text/javascript" > document.write(location.port); </script> <p><b>Remarque :</b> Rien ne! sera retourné si le numéro de port est 80 (numéro de port par défaut) </p> </body> </html>
La propriété protocole
La propriété protocol retourne le protocole de l'URL actuelle, y compris le premier signe deux-points (:)).
Syntaxe
location.protocol
Appui de navigateur
La propriété de protocole est prise en charge dans tous les principaux navigateurs.
Exemple Retourner la portion de protocole de l'URL actuelle :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Exemple affichage la portion de protocole de l'url courante</title> </head > <body> <script type = "text/javascript" > document.write(location.protocol); </script> </body> </html>
La propriété search
La propriété de recherche retourne la partie de la requête d'une URL, y compris le point d'interrogation (?).
Syntaxe
location.search
Appui de navigateur
La propriété de recherche est prise en charge dans tous les principaux navigateurs.
Exemple Retourner la partie requête d'une URL.
Supposons que l'URL actuelle est http://www.exemple.com/submit.htm?email=admin@exemple.com :
Exemple : 📋 Copier le code
<!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Exemple affichage de la partie requête d'une URL</title> </head > <body> <script type = "text/javascript" > document.write(location.search); </script> </body> </html>
Le résultat du code ci-dessus sera :
?email=admin@exemple.com
Exemple analyse d'une adresse URL
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple analyse d'une adresse URL</title>
<script type = "text/javascript" >
function Analyser() {
var anchor = document.getElementById("dmo");
var message = "" ;
message += "hash: " + anchor. hash + "\n" ;
message += "host: " + anchor. host + "\n" ;
message += "hostname: " + anchor. hostname + "\n" ;
message += "href: " + anchor. href + "\n" ;
message += "pathname: " + anchor. pathname + "\n" ;
message += "port: " + anchor. port + "\n" ;
message += "protocol: " + anchor. protocol + "\n" ;
message += "protocolLong: " + anchor.protocolLong + "\n" ;
message += "search: " + anchor. search + "\n" ;
alert (message);
}
</script >
</head >
<body>
<a href ="https://www.oujood.com/js/construction-du-code-javascript.php#bookmark" id = "dmo" > Un lien </a >
<br/><br/>
<button onclick = "Analyser ();"> Analyser la déstination du lien ci-dessus </button >
</body>
</html>
Les méthodes de l’objet location
La méthode assign()
La méthode assign() charge un nouveau document.
Syntaxe
location.assign(URL)
Appui de navigateur
La méthode assign() est prise en charge dans tous les principaux navigateurs.
Exemple Charger un nouveau document :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple affichage nouveau document</title>
<script type = "text/javascript" >
function newDoc()
{
window.location.assign("https://www.oujood.com")
}
</script>
</head>
<body>
<input type="button" value="Nouveau" onclick="newDoc()">
</body>
</html>
La méthode reload()
La méthode reload() est utilisée pour recharger le document actif.
La méthode reload() fait la même chose que le bouton actualiser de votre navigateur.
Par défaut, la méthode reload() recharge le cache, mais vous pouvez forcer le rechargement pour obtenir la page du serveur en définissant le paramètre ForceGet la valeur true.
Syntaxe
location.reload(forceGet)
| Paramètre | Type | Description |
| forceGet | Boolean | En option. false par défaut qui recharge la page du cache. Définissez ce paramètre à true si vous voulez forcer le navigateur à obtenir la page du serveur |
Valeur de retour
Aucune valeur de retour
Appui de navigateur
La méthode reload() est prise en charge dans tous les principaux navigateurs.
Exemple Recharger le document actif :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple actualiser la page</title>
<script type = "text/javascript" >
function reloadPage()
{
location.reload()
}
</script>
</head>
<body>
<input type="button" value="Actualiser"
onclick="reloadPage()">
</body>
</html>
La méthode replace()
La méthode replace() remplace le document actuel par un nouveau.
Syntaxe
location.replace(newURL)
Appui de navigateur
La méthode replace() est prise en charge dans tous les principaux navigateurs.
Exemple Remplacer le document en cours :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple remplacer la page en
cours</title>
<script type = "text/javascript" >
function remplacePage()
{
window.location.replace("https://www.oujood.com");
}
</script>
</head>
<body>
<input type="button" value="Remplacer" onclick="remplacePage()">
</body>
</html>
JavaScript récupérer les différentes parties d'une URL
De même, vous pouvez utiliser d'autres propriétés de l'objet location telles que le protocole, le nom d'hôte, le port, le nom de chemin, la recherche, etc. pour obtenir différentes parties de l'URL.
Essayez l'exemple suivant pour voir comment utiliser la propriété location d'une fenêtre.
Code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>JavaScript récupérer les différentes parties d'une URL</title>
</head>
<body>
<script>
// Affiche l'URL complète
var i=1;
document.write(i + window.location.href + "<hr><br>");
i++
// Affiche le protocole comme http : ou https :
document.write(i + window.location.protocol + "<hr><br>");
i++
// Affiche le nom d'hôte avec le port comme localhost ou localhost:3000
document.write(i + window.location.host + "<hr><br>");
// Affiche le nom d'hôte comme localhost ou www.exemple.com
document.write(i + window.location.hostname + "<hr><br>");
i++
// Affiche le numéro de port comme 3000
document.write(i + window.location.port + "<hr><br>");
i++
// Affiche le nom du chemin comme /produits/search.php
document.write(i + window.location.pathname + "<hr><br>");
i++
// Affiche la chaîne de requête comme ?q=ipad
document.write(i + window.location.search + "<hr><br>");
i++
// Affiche l'identifiant du fragment comme #featured
document.write(i + window.location.hash);
</script>
<p><strong>Note:</strong> Si l'URL ne contient pas un composant spécifique (par exemple, le numéro de port ou l'identificateur de fragment ici), il sera défini comme vide ''..</p>
</body>
</html>
Par carabde 30 mars 2014