devstory

Le Tutoriel de Javascript HashChangeEvent

Site d'apprentissage des langues gratuit:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- HashChangeEvent

Hash est la "partie ancre" (Anchor part) d'une URL. Il demande au navigateur de faire défiler la barre de défilement du navigateur pour afficher la zone de contenu correspondant à Hash.
Exemple de Hash :
hash-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hash Example</title>
      <meta charset="UTF-8">
      <style>
         .content {
            margin-top: 30px;
            padding: 5px;
            border: 1px solid #ddd;
         }
      </style>
   </head>
   <body>
       <a href="#chapter1">Go to Chapter 1</a>
        ||
       <a href="#chapter2">Go to Chapter 2</a>
        ||
       <a href="#chapter3">Go to Chapter 3</a>

      <div class="content">
         <!-- Anchor 1 -->
         <a id="chapter1"></a>
         <h3>Chapter 1</h3>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>
             Chapter 1 content <br/>

         <!-- Anchor 2 -->
         <a id="chapter2"></a>
         <h3>Chapter 2</h3>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/>
             Chapter 2 content <br/> 
         <!-- Anchor 3 -->
         <a id="chapter3"></a>
         <h3>Chapter 3</h3>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
             Chapter 3 content <br/>
      </div>
      <p id="log-div"></p> 
   </body>
</html>
 
HashChangeEvent
HashChangeEvent est une sous-interface de l’’interface Event. Il représente l’événement qui se produit lorsque la "partie ancre" (Anchor part) sur l’URL est modifiée.

Des événements :
Evénements Description
hashchangeL’événement se produit lorsque la "partie ancre" (Anchor part) sur l’URL est modifiée.
Des propriétés (property) :
PropriétésDescription
newURLRenvoie l'URL du document, après que le Hash a été modifié
oldURLRenvoie l'URL du document, avant que le Hash a été modifié.
Fondamentalement, les propriétés (property) newURL, oldURL de HashChangeEvent sont supportées par tous les navigateurs sauf IE.
Exemple avec HashChangeEvent :
hashchangeevents-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>HashChangeEvent Example</title>
      <meta charset="UTF-8">
      <style>
        .content {
           margin-top: 30px;
           padding: 5px;
           border: 1px solid #ddd;
        }
      </style>
      <script>
          function hashchangeHandler(evt)  {
              var msg = "Hash Change! \n"
                     + "event.newURL= "+ evt.newURL +"\n"
                     + "event.oldURL= "+ evt.oldURL ;
              alert(msg);
          }
      </script>
   </head>
   <body onhashchange="hashchangeHandler(event)"> 
            <a href="#chapter1">Go to Chapter 1</a>
             ||
            <a href="#chapter2">Go to Chapter 2</a>
             ||
            <a href="#chapter3">Go to Chapter 3</a>
           <div class="content">
              <!-- Anchor 1 -->
              <a id="chapter1"></a>
              <h3>Chapter 1</h3>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
                  Chapter 1 content <br/>
              <!-- Anchor 2 -->
              <a id="chapter2"></a>
              <h3>Chapter 2</h3>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/>
                  Chapter 2 content <br/> 
              <!-- Anchor 3 -->
              <a id="chapter3"></a>
              <h3>Chapter 3</h3>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
                  Chapter 3 content <br/>
           </div>
   </body>
</html>