如何删除URL中的参数并将其显示在地址栏中而不会导致Javascript中的重定向？

Question

我找到了很多关于如何在没有参数的情况下提取URL的答案.

如何在不导致页面重新加载新URL的情况下重写地址栏中的URL？

shortURL = top.location.href.substring(0, top.location.href.indexOf('?'));
top.location.href = shortURL // Causes redirect

目标是在Javascript中提取参数,但不在地址栏中显示它们.

Answer 1

在支持History对象的现代浏览器中,您可以使用history.replaceState()或history.pushState()更改当前URL而不更改当前页面.您可以更改的内容存在限制(例如,出于安全原因,您无法以这种方式更改域/来源).

请参阅此处以获取这些方法的摘要.

浏览器历史记录记录了您在浏览会话中的位置. .replaceState()允许您使用不同的项目替换历史列表中的当前项目. .pushState()在浏览器历史记录中添加一个新项目,并更改浏览器URL栏中显示的URL,而不重新加载页面.您可以选择使用哪种方法,具体取决于您希望浏览器的"后退"按钮对此特定页面条目的行为方式.

注意:IE 10及更高版本支持这些API.

在不支持历史记录API的旧浏览器版本中,您可以在不重新加载页面的情况下更改URL的唯一部分是URL #末尾的哈希标记(符号后面的部分).

Answer 2

在html5中,可以在不重新加载页面的情况下重写url(出于安全原因,你仍然无法更改域名),使用history api你可以写:

history.replaceState("object or string", "title", "/another-new-url");

其中前两个参数在某种程度上是任意的,第三个参数是新的url(不包括域名).如果要启用后退按钮以返回上一个URL,请使用pushState而不是replaceState上面的.了解更多关于此这些功能的博客文章.

关于浏览器支持,最近的Firefox和Chrome版本支持它,但仅限于IE10 +,这还不是很常见.有关详情请参阅兼容性矩阵或浏览器的实现细节.