onhashchange 事件
JavaScript基础 2022-06-08 12:00:1213小码哥的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
