oujood.com

L'objet Location : Comment utiliser l'objet Location en JavaScript ?

Localisation de la fenêtre en JavaScript Dans ce tutoriel, vous allez découvrir l'objet JavaScript Window Location.
La propriété d'emplacement d'une fenêtre (c'est-à-dire window.location) est une référence à un objet Location ; elle représente l'URL actuelle du document affiché dans la fenêtre actuelle.

chercher |

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.

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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é de recherche retourne la partie de la requête d'une URL, y compris le point d'interrogation (?).

Syntaxe

location.search

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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



Voir aussi nos tutoriel :

La gestion des exceptions javascript

La gestion des exceptions js : Le langage Javascript offre aux programmeurs la possibilité de gérer les exceptions, des anomalies pouvant apparaître subitement dans le code.

Cours html Comment creer un site web. Mettre le site en ligne

Comment créer et mettre en ligne un site web ...

Objet QuickTime

Objet QuickTime
Ce chapitre décrit comment jouer des films avec l'objet QuickTime.