Question

如果我向某人发送了一个链接http://example.com/#about，我该怎样才能从页面加载http://example.com上的网址中清除该主题标签和文字。

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

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

Answer 1

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

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

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

网址 - 此历史记录条目的URL由此参数指定。请注意，调用后浏览器不会尝试加载此URL   pushState（），但它可能会稍后尝试加载URL   用户重启浏览器后。新URL不需要   绝对;如果是相对的，则相对于当前URL进行解析。   新网址必须与当前网址的来源相同;除此以外，   pushState（）将抛出异常。此参数是可选的;如果它   未指定，它被设置为文档的当前URL。

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

新网址可以是与当前网址相同的任何网址。在   相比之下，设置window.location只会使您保持在同一个文档中   如果你只修改哈希值。

Answer 2

如果你不介意主题标签存在但是空，你可以使用：

FilePicker

如果不重新加载页面，会将document.location.hash = '';更改为http://example.com/#about，其向后兼容性也高于http://example.com/#。

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

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，您的访问者将回访并转到您从网址中删除的状态/哈希，这可能会降低整体访问者的满意度。

编辑：另外，根据OP的用例，我确保在您修改了History对象之后绑定任何popstate或hashchange函数（例如任何动画scrollTo或其他什么东西。）

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

4 个答案: