codestory

Die Anleitung zu Javascript HashChangeEvent

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

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:
EventBezeichnung
hashchangeDas Event passiert wenn der Anker Teil (Anchor part) von URL ändert wird.
Die Properties
Propertydie Bezeichnung
newURLURL vom Dokument zurückgeben nachdem Hash ändert wird.
oldURLURL 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>
 

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.