Inhaltsverzeichnis

Die Anleitung zu Javascript HashChangeEvent

1- HashChangeEvent

Hash ist "Der Anker Teil" (Anchor part) eines  URL. Es sagt den Browser, den Scrollbar des Browser zu scrollen um den Hash entsprechenden Inhaltsbereich anzuzeigen.
Das Beispiel über  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 ist eine Sub-Interface von interface Event. Es vertritt das Event, das passiert wenn der Anker Teil (Anchor part) auf  URL ändert wird.
Die Events:
Event Bezeichnung
hashchange Das Event passiert wenn der Anker Teil (Anchor part) von URL ändert wird.
Die Properties
Property die Bezeichnung
newURL URL vom Dokument zurückgeben nachdem Hash ändert wird.
oldURL URL vom Dokument zurückgeben bevor Hash ändert wird.
Grundsätzlich werden die Properties  newURL, oldURL von  HashChangeEvent durch allen Browser, außer  IE unterstützt.
Das Beispiel über 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>