JavaScript hashchange 事件 - JavaScript 教程

摘要：在本教程中，您将了解 JavaScript hashchange 事件以及如何有效地处理它。

JavaScript hashchange 事件简介

URL 哈希是在 URL 中井号 (#) 之后的所有内容。例如，假设您有以下 URL

https://tutorial.javascript.ac.cn/javascript-dom/javascript-hashchange/#headerCode language: JavaScript (javascript)

在此 URL 中，哈希为 header。

当哈希更改为 footer 时，hashchange 事件将触发

https://tutorial.javascript.ac.cn/javascript-dom/javascript-hashchange/#footerCode language: JavaScript (javascript)

在此示例中，哈希从 #header 更改为 #footer。

要将事件监听器附加到 hashchange 事件，请在 window 对象上调用 addEventListener() 方法

window.addEventListener('hashchange',() =>{
    console.log('The URL has has changed');
});Code language: JavaScript (javascript)

要获取当前 URL 哈希，请访问 location 对象的 hash 属性

window.addEventListener('hashchange',() => {
    console.log(`The current URL hash is ${location.hash}`);
});Code language: JavaScript (javascript)

此外，您可以通过将事件监听器分配给 window 对象的 onhashchange 属性来处理 hashchange 事件

window.onhashchange = () => {
    // handle hashchange event here
};Code language: JavaScript (javascript)

JavaScript hashchange 事件示例

hashchange 事件对于创建单页应用程序 (SPA) 或在不重新加载整个页面的情况下动态更新内容非常有用。

以下示例展示了如何使用 hashchange 事件根据 URL 哈希更新 div 的内容。

首先，创建一个简单的 HTML 文件 (index.html)，其中包含一些导航链接和一个主部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript HashChange Example</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/app.js" defer></script>
    </head>
    <body>
        <header>
            <nav>
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#contact">Contact</a>
            </nav>
        </header>
        <main id="content">
            <h1>HashChange Event Demo!</h1>
            <p>Click the links above to change the content.</p>
        </main>
    </body>
</html>Code language: HTML, XML (xml)

其次，创建一个 JavaScript 文件 app.js 来处理 hashchange 事件并相应地更新内容

const updateContent = () => {
  const content = document.getElementById('content');
  const hash = window.location.hash.substring(1); // Remove the '#' from the hash

  switch (hash) {
    case 'home':
      content.innerHTML = `
          <h1>Home</h1>
          <p>Welcome to the home page.</p>
        `;
      break;
    case 'about':
      content.innerHTML = `
          <h1>About</h1>
          <p>Learn more about us on this page.</p>
        `;
      break;
    case 'contact':
      content.innerHTML = `
          <h1>Contact</h1>
          <p>Get in touch with us.</p>
        `;
      break;
  }
};

// Event listener for hashchange
window.addEventListener('hashchange', updateContent);
Code language: JavaScript (javascript)

输出

摘要

当 URL 哈希更改时，hashchange 事件将触发。
要注册事件处理程序，请调用 addEventListener() 方法或将事件处理程序分配给 window 对象的 onhashchange 属性。

本教程对您有帮助吗？