如何在页面加载时从 URL 中清除 Hashtag

Question

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

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

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

Answer 1

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

\n\n

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

\n\n

\n

pushState()接受三个参数：状态对象、标题（当前被忽略）和（可选）URL。

\n\n

URL \xe2\x80\x94 新历史条目的 URL 由该参数给出。请注意，浏览器在调用pushState() 后不会尝试加载此URL，但可能稍后会尝试加载该URL，例如在用户重新启动浏览器后。新 URL 不需要是绝对的；\n 如果是相对的，则相对于当前 URL 进行解析。\n 新 URL 必须与当前 URL 具有相同的来源；否则，pushState() 将抛出异常。该参数是可选的；如果未指定，则将其设置为文档的当前 URL。

\n\n

从某种意义上说，调用pushState()类似于设置window.location\n = "#foo"，因为两者也会创建并激活与当前文档关联的另一个历史记录条目。但pushState() 有一些\n 优点：

\n\n

新 URL 可以是与当前 URL 同源的任何 URL。相比之下，如果仅修改散列，则设置 window.location 仅使您位于同一文档。

\n

\n

Answer 2

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

document.location.hash = '';

无需重新加载页面即可更改http://example.com/#about为http://example.com/#，也具有比history.pushState.

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