onhashchange 事件
JavaScript基础 2022-06-08 12:00:12小码哥的IT人生shichen
onhashchange 事件
实例
锚部分改变后执行 JavaScript：
<body onhashchange="myFunction()">
完整实例：
<!DOCTYPE html>
<html>
<body onhashchange="myFunction()">
<p>点击按钮将当前网址的锚部分改为 #part5</p>
<button onclick="changePart()">试一试</button>
<p id="demo"></p>
<script>
// 使用 location.hash 属性更改锚部分
function changePart() {
location.hash = "part5";
var x = location.hash;
document.getElementById("demo").innerHTML = "The anchor part is now: " + x;
}
// 如果锚部分发生改变，则提示一些文本
function myFunction() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
当目前 URL 的锚部分（以 '#' 符号开头）发生改变时，会发生 onhashchange 事件。
有关什么是锚部分的一个例子：假设当前的 URL 是 http://www.example.com/test.htm#part2 - 此 URL 的锚部分将是 #part2。
如需调用此事件，您可以：
- 通过设置 Location 对象的 location.hash 或 location.href 属性来改变锚部分
- 使用不同的书签导航到当前页面（使用“后退”或“前进”按钮）
- 单击指向书签锚点的链接
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onhashchange | 5.0 | 8.0 | 3.6 | 5.0 | 10.6 |
语法
在 HTML 中：
<element onhashchange="myScript">
完整实例：
<!DOCTYPE html>
<html>
<body onhashchange="myFunction()">
<p>本例演示如何将 "onhashchange" 事件分配给 body 元素。</p>
<p>点击按钮将当前网址的锚部分改为 #part5</p>
<button onclick="changePart()">试一试</button>
<p id="demo"></p>
<script>
// 使用 location.hash 属性更改锚点部分
function changePart() {
location.hash = "part5";
var x = location.hash;
document.getElementById("demo").innerHTML = "The anchor part is now: " + x;
}
// 如果锚部分发生改变，则提示一些文本
function myFunction() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中：
object.onhashchange = function(){myScript};
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 HTML DOM 将 "onhashchange" 事件分配给 body 元素。</p>
<p>点击按钮将当前网址的锚部分改为 #part5</p>
<button onclick="changePart()">试一试</button>
<p id="demo"></p>
<script>
// 使用 location.hash 属性更改锚点部分
function changePart() {
location.hash = "part5";
var x = location.hash;
document.getElementById("demo").innerHTML = "The anchor part is now: " + x;
}
document.getElementsByTagName("BODY")[0].onhashchange = function() {myFunction()};
function myFunction() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("hashchange", myScript);
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 addEventListener() 方法将 "hashchange" 事件附加到 window 对象。</p>
<p>点击按钮将当前网址的锚部分改为 #part5</p>
<button onclick="changePart()">试一试</button>
<p id="demo"></p>
<script>
// 使用 location.hash 属性更改锚部分
function changePart() {
location.hash = "part5";
var x = location.hash;
document.getElementById("demo").innerHTML = "The anchor part is now: " + x;
}
window.addEventListener("hashchange", myFunction);
function myFunction() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | HashChangeEvent |
| 支持的 HTML 标签： | <body> |
| DOM 版本： | Level 3 Events |
更多实例
示例代码：
如何将 "onhashchange" 事件分配给 window 对象：
window.onhashchange = myFunction;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例演示如何将 "onhashchange" 事件分配给 window 对象。</p>
<p>点击按钮将当前网址的锚部分改为 #part5</p>
<button onclick="changePart()">试一试</button>
<p id="demo"></p>
<script>
// 使用 location.hash 属性更改锚点部分
function changePart() {
location.hash = "part5";
var x = location.hash;
document.getElementById("demo").innerHTML = "The anchor part is now: " + x;
}
window.onhashchange = myFunction;
function myFunction() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
