两个按钮跳转至同一页面时如何识别是哪个按钮被点击？

有多种可落地的实现方式，以下是3种常用方案： #

方案1：URL查询参数传参（最推荐，兼容性最好） #

原理是给跳转链接拼接不同的查询参数，跳转后在目标页面解析参数即可识别点击来源。

修改原按钮代码： #

<div class = "buttons">
     <button class = "worldBtn" onclick="window.location.href='map/map.html?type=world';">WORLD</button>
     <br>
     <button class = "usBtn" onclick="window.location.href='map/map.html?type=us';">UNITED STATES</button>
</div>

目标页面map.html取值逻辑： #

// 解析URL中的查询参数
const queryParams = new URLSearchParams(window.location.search)
const clickSource = queryParams.get('type')

// 按来源执行不同逻辑
if (clickSource === 'world') {
  // 世界按钮对应的逻辑
} else if (clickSource === 'us') {
  // 美国按钮对应的逻辑
}

方案2：localStorage本地存储传值（适合不想暴露参数在URL的场景） #

原理是点击按钮时先把标识写入本地存储，跳转后读取存储的标识即可。

修改原按钮代码： #

<div class = "buttons">
     <button class = "worldBtn" onclick="localStorage.setItem('clickBtn', 'world'); window.location.href='map/map.html';">WORLD</button>
     <br>
     <button class = "usBtn" onclick="localStorage.setItem('clickBtn', 'us'); window.location.href='map/map.html';">UNITED STATES</button>
</div>

目标页面map.html取值逻辑： #

const clickSource = localStorage.getItem('clickBtn')
// 读取后立即清除存储值，避免后续操作受缓存干扰
localStorage.removeItem('clickBtn')

// 执行对应逻辑即可

方案3：Hash传值（适合单页应用场景） #

原理是给跳转链接拼接hash标识，hash变化不会触发页面重新请求资源。

修改原按钮跳转地址： #

分别改为map/map.html#world和map/map.html#us即可。

目标页面取值逻辑： #

// 去掉hash开头的#号
const clickSource = window.location.hash.slice(1)
// 执行对应逻辑

注意事项： #

• 方案1的参数会直接暴露在URL中，支持页面刷新、分享后仍能保留来源标识，适合大多数场景。
• 方案2要注意多标签页同时操作时可能出现存储值被覆盖的问题，建议用完立即清除。
• 方案3的hash值不会发送到服务端，仅前端可读取。

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