如何在页面加载时从URL清除标签

Question

如果我向某人发送了一个链接http://example.com/#about ，我该如何清除页面加载URL中的该标签和文本http://example.com 。

我一直在构建利用CSS :target属性的灯箱。 我希望这样做，如果有人发送或单击带有标签和附加到URL的文本的链接，则页面实际上会忽略它或从加载时的URL中清除它。

我以为这是一个非常常见的问题，只需简单的答案，但我的研究没有遇到任何问题。 我愿意接受包含JavaScript和jQuery的答案。

Answer 1

使用history.pushState ，它不会重新加载页面或不留下尾随# ：

history.pushState('', '', window.location.pathname);

pushState（）具有三个参数：状态对象，标题（当前被忽略）和（可选）URL。

URL-新历史记录条目的URL由此参数指定。 请注意，在调用pushState（）之后，浏览器将不会尝试加载此URL，但是它可能稍后会尝试加载URL，例如在用户重新启动浏览器之后。 新的URL不必是绝对的。 如果是相对的，则相对于当前URL进行解析。 新网址必须与当前网址具有相同的来源； 否则，pushState（）将引发异常。 该参数是可选的。 如果未指定，则将其设置为文档的当前URL。

从某种意义上讲，调用pushState（）类似于设置window.location =“ #foo”，因为两者都将创建并激活与当前文档关联的另一个历史记录条目。 但是pushState（）有一些优点：

新URL可以是与当前URL起源相同的任何URL。 相反，仅当您仅修改哈希时，设置window.location可使您位于同一文档中。

Answer 2

如果您不介意主题标签存在但为空，则可以使用：

document.location.hash = '';

它将在不重新加载页面的情况下将http://example.com/#about更改为http://example.com/# ，其向后兼容性也比history.pushState 。

您可以在确保弹出窗口或其他内容正确加载后使用它，只需按原样调用此行即可。

Answer 3

window.location.hash = '';//remove hash text
window.location.href.replace('#', '');//remove hash
history.replaceState(null, null, window.location.href);//replace state

Answer 4

我无可奉告，但要增加BenG的答案，那些不想让访客在其历史记录中再走一步的人应该使用history. replace State(null, null, window.location.pathname) 。

如果您使用pushState ，则访问者将被击退，并被带到从URL中删除的状态/哈希值，这可能会降低总体访问者满意度。

编辑：另外，根据OP的用例，在修改了History对象（例如任何动画scrollTo或诸如此类） 后 ，我将确保您绑定任何popstate或hashchange函数。