JavaScript对象事件onhashchange|URL的锚部分发生改变时触发

2021年1月31日2021年1月31日

由 hcduguo

事件对象参考手册

定义与用法

onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发。

锚部分的实例：指定当前 URL 为
http://www.example.com/test.htm#part2 – 这个 URL 中的锚部分为 #part2。

你可以使用以下方式调用事件:

通过设置Location 对象的 location.hash 或 location.href 属性修改锚部分。
使用不同书签导航到当前页面（使用”后退” 或”前进”按钮）
点击链接跳转到书签锚

语法格式

HTML 中:

< element onhashchange=” myScript”>

JavaScript 中:

object.onhashchange=function(){ myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener(“hashchange”, myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

示例代码

当锚部分发生变化时执行 JavaScript:

<body onhashchange="myFunction()">

亲自试试

<script>
// 使用 location.hash 属性来修改锚部分
function changePart() {
    location.hash = "part5";
    var x = "锚部分现在为: " + location.hash;
    document.getElementById("demo").innerHTML = x;
}
document.getElementsByTagName("BODY")[0].onhashchange = function() {myFunction()};
function myFunction() {
    alert("锚部分已修改！");
}
</script>

亲自试试

<script>
// 使用 location.hash 属性来修改锚部分
function changePart() {
    location.hash = "part5";
    var x = "锚部分现在为: " + location.hash;
    document.getElementById("demo").innerHTML = x;
}
window.addEventListener("hashchange", myFunction);
function myFunction() {
    alert("锚部分已修改！");
}
</script>

亲自试试

浏览器支持

事件
onhashchange	5.0	8.0	3.6	5.0	10.6

表格中的数字表示支持该事件的第一个浏览器的版本号。

技术细节

是否支持冒泡:	Yes
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<body>

事件对象参考手册