URL中包含#符号时如何调用JavaScript函数

URL中#后面的内容为哈希片段，该片段变更不会触发页面重载，你可以通过以下方法实现哈希变化时触发自定义逻辑，同时可按需屏蔽默认的锚点跳转/滚动行为：

• 方法1：监听hashchange事件（哈希变更时触发）
  这个事件会在URL的哈希部分发生变化时自动触发，直接绑定事件回调即可执行自定义函数：

window.addEventListener('hashchange', function(e) {
  // 阻止默认的锚点滚动行为，如果需要保留默认滚动可以删掉下一行
  e.preventDefault();
  // 获取当前哈希值，#也会包含在内，比如#test就会拿到'#test'
  const currentHash = window.location.hash;
  // 这里写你要执行的自定义逻辑
  console.log('哈希变更，当前哈希为：', currentHash);
  yourCustomFunction(currentHash);
})

• 方法2：页面初始化时主动读取哈希触发逻辑
  hashchange事件仅在哈希变更时触发，如果页面首次加载就已经带有#后缀的哈希，需要在页面加载完成后主动读取哈希执行逻辑：

window.addEventListener('load', function() {
  if(window.location.hash) {
    // 存在哈希，执行自定义逻辑
    console.log('页面加载时已存在哈希：', window.location.hash);
    yourCustomFunction(window.location.hash);
  }
})

• 方法3：自定义锚点点击逻辑（可选）
  如果你页面内的<a>标签跳转哈希的逻辑也需要完全自定义，可以给所有带哈希跳转的a标签绑定点击事件，完全接管跳转逻辑：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    // 阻止默认跳转滚动
    e.preventDefault();
    // 手动修改哈希，会自动触发上面的hashchange事件
    window.location.hash = this.getAttribute('href');
  })
})

如果你需要根据不同的哈希值执行不同的函数，可以用对象映射的方式匹配：

const hashHandler = {
  '#home': () => { /* 首页逻辑 */ },
  '#about': () => { /* 关于页逻辑 */ },
  '#contact': () => { /* 联系页逻辑 */ }
}

// 触发的时候直接调用
if(hashHandler[currentHash]) {
  hashHandler[currentHash]();
}

内容的提问来源于stack exchange，提问作者Aniruddha