Firefox中window.history.pushState()替换URI编码空格为实际空格问题

首先咱们拆解下问题：你用encodeURIComponent()编码带空格的参数，再通过window.history.pushState()更新URL，但Firefox里空格没被正确传入URL，其他浏览器却正常。这种情况大概率是手动编码和URL处理逻辑的兼容性坑，下面给你几个可行的解决方案：

1. 改用URLSearchParams自动处理编码（最推荐） #

手动编码很容易踩浏览器兼容性的雷，URLSearchParams是浏览器原生API，会自动按标准编码所有特殊字符（包括空格、逗号这类），而且各个浏览器（包括Firefox）表现完全一致。

改写你的函数试试：

function updateUrlQueryParam(value) {
  // 获取当前URL的查询参数对象
  const params = new URLSearchParams(window.location.search);
  // 设置新参数值——这里不需要手动调用encodeURIComponent，API会自动处理
  params.set('你的参数名', value);
  // 拼接成新的URL
  const newUrl = `${window.location.pathname}?${params.toString()}`;
  // 更新URL状态
  window.history.pushState({}, '', newUrl);
}

调用updateUrlQueryParam('Foo, bar')后，不管哪个浏览器，查询参数都会被正确编码为Foo%2C%20bar，Firefox也能正常识别并传入URL。

2. 检查手动编码后的字符串是否被意外修改 #

如果你坚持手动用encodeURIComponent()，先确认编码后的字符串是否正确：

• 调用encodeURIComponent('Foo, bar')应该返回"Foo%2C%20bar"（逗号编码为%2C，空格编码为%20）。
• 拼接URL时，别对编码后的字符串做额外解码操作（比如误调用decodeURIComponent()），也不要在模板字符串拼接时引入多余空格。

正确的手动编码写法示例：

function updateUrlQueryParam(value) {
  const encodedValue = encodeURIComponent(value);
  // 直接拼接编码后的字符串，别做任何额外处理
  const newUrl = `${window.location.pathname}?你的参数名=${encodedValue}`;
  window.history.pushState({}, '', newUrl);
}

3. 确认Firefox地址栏的显示逻辑 #

有时候Firefox会在地址栏把%20显示成空格，但这只是界面优化，实际的URL查询参数是正确的。你可以通过window.location.search或者new URLSearchParams(window.location.search).get('你的参数名')验证参数值，如果能得到"Foo, bar"，说明编码其实是有效的，只是地址栏显示的问题，不需要额外处理。

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