Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).
The HashChangeEvent event is fired when the fragment identifier of the URL has changed (the part of the URL that follows the # symbol, including the # symbol).
General info
- Specification
- HTML5
- Interface
- HashChangeEvent
- Bubbles
- Yes
- Cancelable
- No
- Target
- defaultView
- Default Action
- None
Properties
HashChangeEvent.newURLRead only- The new URL to which the window is navigating.
HashChangeEvent.oldURLRead only- The previous URL from which the window was navigated.
Syntax
window.onhashchange = funcRef;
or
<body onhashchange="funcRef();">
or
window.addEventListener("hashchange", funcRef, false);
Parameters
funcRef- A reference to a function.
Example
function locationHashChanged() {
if (location.hash === "#somecoolfeature") {
somecoolfeature();
}
}
window.addEventListener("hashchange", locationHashChanged);
Polyfill
There are several fallback scripts listed on this page. Basically those scripts check the location.hash at a regular interval. Here is a version that allows only one handler to be bound to the <code>window.onhashchange</code> property:
(function(window) {
// exit if the browser implements that event
if ( "onhashchange" in window.document.body ) { return; }
var location = window.location,
oldURL = location.href,
oldHash = location.hash;
// check the location hash on a 100ms interval
setInterval(function() {
var newURL = location.href,
newHash = location.hash;
// if the hash has changed and a handler has been bound...
if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
// execute the handler
window.onhashchange({
type: "hashchange",
oldURL: oldURL,
newURL: newURL
});
oldURL = newURL;
oldHash = newHash;
}
}, 100);
})(window);
SpecificationsEdit
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'HashChangeEvent' in that specification. |
Living Standard | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 5 | Yes | 3.6 | 8 | 10.6 | 5 |
oldURL | Yes | ? | 6 | No | Yes | ? |
newURL | Yes | ? | 6 | No | Yes | ? |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | 4 | 11.0 | 5 | ? |
oldURL | Yes | Yes | ? | Yes | Yes | ? | ? |
newURL | Yes | Yes | ? | Yes | Yes | ? | ? |