如何在HTML/JavaScript/CSS中实现点击链接时向目标页面传递数据

你看到的URL中#后面的内容叫做哈希片段（hash fragment），这部分内容仅在浏览器端留存，不会随请求发送到服务端，非常适合纯前端场景下的页面间参数传递。具体实现步骤如下：

1. 构造带参数的跳转链接 #

在跳转来源页的链接中，直接把参数拼接在#后面即可，多个参数用&分隔：

<!-- 来源页代码示例 -->
<a href="target.html#color=ff0000">跳转到红色页面</a>
<a href="target.html#color=00ff00">跳转到绿色页面</a>
<a href="target.html#color=0000ff&text=测试">跳转到蓝色页面带文字参数</a>

2. 目标页读取哈希参数赋值 #

在目标页面的JavaScript中直接读取window.location.hash，处理后就能拿到参数值赋值给变量：

// 目标页JS代码
// 去掉hash开头的#号
const hashStr = window.location.hash.slice(1)
const params = {}

// 解析hash为键值对对象
if (hashStr) {
  const pairList = hashStr.split('&')
  pairList.forEach(pair => {
    const [key, value] = pair.split('=')
    // 解码处理特殊字符、中文
    params[key] = decodeURIComponent(value)
  })
}

// 拿到颜色参数，设置默认值避免参数为空
const targetColor = params.color || 'ffffff'
// 示例：用参数设置页面背景色
document.body.style.backgroundColor = `#${targetColor}`

额外注意事项 #

• 哈希传参仅适用于纯前端交互场景，如果参数需要后端处理，需要使用查询参数（即?开头的?key=value格式）
• 如果参数包含中文、空格或者特殊字符，构造链接时先用encodeURIComponent()编码参数值，避免解析错误
• 如果需要在不刷新页面的情况下响应哈希变化，可以监听hashchange事件：

  window.addEventListener('hashchange', () => {
    // 此处重新读取哈希参数更新页面内容即可
  })
  

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