📌  相关文章
📜  HTML | onhashchange 事件属性(1)

📅  最后修改于: 2023-12-03 15:15:38.407000             🧑  作者: Mango

HTML | onhashchange 事件属性

简介

onhashchange 事件属性是 HTML DOM 中的一个属性，当页面 URL 的片段标识符（即 URL 中的 # 后面的部分）发生变化时，这个事件就会被触发。可以通过添加事件监听器来监听这个事件，以便在 URL 的哈希部分变化时执行一些操作。

语法
window.onhashchange = function () { /* 处理函数 */ };
示例

下面是一个简单的示例，它使用 onhashchange 事件来监听浏览器 URL 的变化并显示哈希值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onhashchange 事件示例</title>
</head>
<body>
    <h1>当前哈希值：</h1>
    <div id="hash-value"></div>
    
    <script>
        function hashChangeHandler() {
            var hash = window.location.hash;
            document.getElementById('hash-value').textContent = hash;
        }
        
        window.onhashchange = hashChangeHandler;
    </script>
</body>
</html>

这个示例中，我们在 HTML 中定义了一个 <div> 元素来显示当前的哈希值。在 JavaScript 中，我们定义了一个函数 hashChangeHandler，它通过 window.location.hash 获取当前 URL 的哈希部分，并将其显示在 <div> 元素中。最后，我们将 hashChangeHandler 函数绑定到 onhashchange 事件，以便在 URL 哈希部分发生变化时触发。

注意事项
  1. onhashchange 事件只会在 URL 哈希部分变化时触发，如果 URL 中其他部分发生变化，该事件不会被触发。
  2. IE8 及以下版本不支持 onhashchange 事件。可以通过定时器间隔一段时间来检测 URL 的变化来实现相似的效果。
  3. 如果需要在页面第一次加载时获取 URL 的哈希部分并执行一些操作，可以在 window.onload 事件中调用一次事件处理函数。
参考链接