如何在URI包含Hash(#)时执行对应JavaScript函数？

嘿，这个需求其实挺容易实现的——核心就是读取URL中的哈希值（也就是#后面的部分），然后根据不同的哈希值触发对应的函数。下面给你几种实用的方案，覆盖不同场景：

方案1：页面首次加载时检测哈希 #

如果只需要处理用户直接访问带哈希的URL的场景，我们可以在页面加载完成后，直接读取window.location.hash来判断：

// 等待页面完全加载后执行
window.addEventListener('load', function() {
  const currentHash = window.location.hash;
  
  // 注意哈希值会包含开头的#，所以判断时要带上
  if (currentHash === '#tag1') {
    func1();
  } else if (currentHash === '#tag2') {
    func2();
  }
});

// 示例函数，替换成你实际的业务逻辑
function func1() {
  console.log('func1 执行了！');
  // 这里写你的func1具体代码
}

function func2() {
  console.log('func2 执行了！');
  // 这里写你的func2具体代码
}

方案2：监听哈希变化（支持页面内切换锚点） #

如果用户可能在页面内点击锚点链接（比如从#tag1切换到#tag2），那我们还需要监听hashchange事件，这样哈希变化时能自动触发对应函数：

// 监听哈希值变化事件
window.addEventListener('hashchange', function() {
  const currentHash = window.location.hash;
  
  if (currentHash === '#tag1') {
    func1();
  } else if (currentHash === '#tag2') {
    func2();
  }
});

// 同样是你的业务函数
function func1() {
  console.log('func1 被触发啦');
}

function func2() {
  console.log('func2 被触发啦');
}

优化方案：复用判断逻辑（覆盖所有场景） #

如果想同时处理首次加载和页面内哈希变化的情况，最好把判断逻辑抽成单独的函数，避免重复代码：

// 封装哈希判断逻辑
function handleHashTrigger() {
  const currentHash = window.location.hash;
  
  // 用switch更清晰，方便后续扩展更多哈希值
  switch(currentHash) {
    case '#tag1':
      func1();
      break;
    case '#tag2':
      func2();
      break;
    default:
      // 如果哈希不是tag1/tag2，可以执行默认逻辑，或者留空不处理
      console.log('没有匹配的哈希值');
      break;
  }
}

// 页面加载时执行一次
window.addEventListener('load', handleHashTrigger);
// 哈希变化时执行
window.addEventListener('hashchange', handleHashTrigger);

// 你的业务函数
function func1() {
  console.log('func1 运行中...');
}

function func2() {
  console.log('func2 运行中...');
}

小提示 #

• 如果需要忽略哈希值的大小写（比如#Tag1也能触发func1），可以把哈希值转成小写再判断：currentHash.toLowerCase() === '#tag1'
• 如果哈希值后面带额外参数（比如#tag1?param=123），可以用split('#')[1].split('?')[0]提取纯哈希部分再判断

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