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

【问题标题】：How to Clear Hashtag from URL on Page Load如何在页面加载时从 URL 中清除 Hashtag
【发布时间】：2016-08-12 16:47:51
【问题描述】：

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

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

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

【问题讨论】：

parent.location.hash='' ; 这应该会删除散列
alert(window.location.href.split('#')[0]);

标签： javascript jquery url anchor hashtag

【解决方案1】：

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

document.location.hash = '';

这将在不重新加载页面的情况下将http://example.com/#about 更改为http://example.com/#，并且具有比history.pushState 更高的向后兼容性。

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

【讨论】：

执行此代码的最快方法是什么？现在我在标题中使用它，但希望它执行得更快。 window.ready = function() { parent.location.hash='' ; };
我不会依赖比等待文档正确加载更快的方法。所以我会在处理灯箱后立即执行它或使用$(document).ready(...)
$(document).ready(...) 是最快的方法。欣赏答案。

【解决方案2】：

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

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

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

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

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

新 URL 可以是与当前 URL 同源的任何 URL。在相比之下，设置 window.location 只会让你在同一个文档中如果你只修改哈希。

【讨论】：

我喜欢这个解决方案删除了尾随的#。由于@casraf 提到的向后兼容性，您是否知道这不太兼容。
浏览器兼容性在链接底部。所有新的浏览器都应该不错。
我完全错过了您帖子中的链接。谢谢。
pushState 似乎是非常新的。在 Firefox 中，它从当前的主要版本 61 开始。
@BenG 这正是我一直在寻找的，正如@Matthew Backman 指出的那样，还删除了尾随的#。谢谢;D

【解决方案3】：

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

【讨论】：

成功删除哈希但无法从 url 中删除 #..

【解决方案4】：

我无法发表评论，但要补充 BenG 的答案，那些不希望他们的访问者在他们的历史记录中增加一步的人应该使用 history.replaceState(null, null, window.location.pathname) .

如果您使用 pushState，您的访问者会反击并被带到您从 URL 中删除的状态/哈希，这可能会导致整体访问者满意度下降。

编辑：另外，根据 OP 的用例，我会确保您在修改 History 对象（例如任何动画 @987654327 @'s 之类的）。

【讨论】：