onhashchange 事件

事件对象参考手册 事件对象

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<body onhashchange="myFunction()">

  <p>点击按钮修改当前 URL 的锚部分为 #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 = x;
    }
    // 如果锚部分改变则弹出提示窗口
    function myFunction() {
      alert("锚部分已修改！");
    }
  </script>

</body>
</html>

尝试一下 »

定义和用法

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

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

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

浏览器支持

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

事件
onhashchange 5.0 8.0 3.6 5.0 10.6

语法

HTML 中:

<element onhashchange="myScript">
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<body onhashchange="myFunction()">

  <p>该实例演示了如何向 body 元素中添加 "onhashchange" 事件。</p>
  <p>点击按钮修改当前 URL 的锚部分为 #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 = x;
    }
    // 如果锚部分改变则弹出提示窗口
    function myFunction() {
      alert("锚部分已修改！");
    }
  </script>

</body>
</html>

尝试一下 »

JavaScript 中:

object.onhashchange = function() {
  myScript
};
<p>该实例演示了如何使用 HTML DOM 向 body 元素中添加 "onhashchange" 事件。</p>
<p>点击按钮修改当前 URL 的锚部分为 #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 = x;
  }
  document.getElementsByTagName("BODY")[0].onhashchange = function() {
    myFunction()
  };

  function myFunction() {
    alert("锚部分已修改！");
  }
</script>

尝试一下 »

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("hashchange", myScript);
<p>该实例演示了如何使用 addEventListener()方法 向 body 元素中添加 "onhashchange" 事件。</p>
<p>点击按钮修改当前 URL 的锚部分为 #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 = x;
  }
  window.addEventListener("hashchange", myFunction);

  function myFunction() {
    alert("锚部分已修改！");
  }
</script>

尝试一下 »

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

技术细节

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

事件对象参考手册 事件对象