Руководство Javascript HashChangeEvent
View more Tutorials:
Hash это "якорная часть" (Anchor part) у URL. Он говорит браузеру прокрутить полосу прокрутки браузера, чтобы отобразить область содержимого, соответствующую Hash.

Пример с 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 это подинтерфейс интерфейса Event. Он представляет событие, которое происходит когда "якорная часть" (Anchor part) на URL меняется.
События:
Событие | Описание |
---|---|
hashchange | Событие происходит, когда "якорная часть" (Anchor part) у URL меняется. |
Свойства (property):
Свойства | Описание |
---|---|
newURL | Возвращает URL документа, после изменения Hash. |
oldURL | Возвращает URL документа, до изменения Hash. |
В основном свойства (property) newURL, oldURL у HashChangeEvent поддерживаются всеми браузерами, кроме IE.
Пример с 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>