Die Anleitung zu Javascript HashChangeEvent
View more Tutorials:
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>