javascript - 用js修改URL参数的最佳方法

Question

我试图修改 URL 参数，但我找不到完美的方法。

首先我尝试了：

window.location.href = window.location.href + '?test';

问题是，页面重新加载，它只是添加到 url。

然后我尝试了：

window.location.href = String( window.location.href ).replace( "?test", "" );

这很完美，我想要替换的部分被替换/删除，但页面每次都会重新加载......

然后我读到：

window.history.pushState( {} , 'test', '?test' );

但这在某种程度上不起作用......

我的目标是在单击按钮以控制功能时添加和替换/删除 URL 字符串。

例如 URL 是http://www.example.com/?showoverlay&?showhint

例如，这显示了基于这些 URL 参数的叠加层和提示工具提示。当用户关闭覆盖时，应该删除“showoverlay”部分而不重新加载页面。所以网址是：

http://www.example.com/?showhint

Answer 1

您是否尝试过使用 replaceState？它会在不重新加载页面的情况下替换历史记录，并且可能适合您的用例。

window.history.replaceState(data, title [, url  ] );

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method

如果您需要保留 url 的其他部分，请确保将其存储在单独的变量中并将其附加回 url。

这大致是您如何获取 URL 的每个部分：

let url = window.location.origin + window.location.pathname + window.location.search

然后你只需将它添加回来

window.history.replaceState({}, '', url + '&yourNewParameters=value')