如何在不刷新页面的情况下使用 JavaScript 从 window.location (URL) 中删除哈希？

Question

我有这样的 URL： http://example.com#something ，我如何删除 #something ，而不导致页面刷新？

我尝试了以下解决方案：

window.location.hash = '';

但是，这不会从 URL 中删除井 # 。

原文由 Tom Lehman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最初的问题：

 window.location.href.substr(0, window.location.href.indexOf('#'))

或者

window.location.href.split('#')[0]

两者都将返回不带散列的 URL 或其后的任何内容。

关于您的编辑：

对 window.location 的任何更改都会触发页面刷新。您可以在不触发刷新的情况下更改 window.location.hash （尽管如果您的哈希与页面上的 id 匹配，窗口会跳转），但您无法摆脱哈希符号。选择哪个更糟…

最新的答案

关于如何在不牺牲（完全重新加载或将哈希符号留在那里）的情况下如何做到这一点的正确答案就 在这里。在这里留下这个答案是关于 2009 年的原始答案，而利用新浏览器 API 的正确答案是 1.5 年后给出的。

原文由 Gabriel Hurley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如今，解决这个问题已经触手可及。 HTML5 History API 允许我们操作地址栏以显示当前域中的任何 URL。

 function removeHash () {
    history.pushState("", document.title, window.location.pathname
                                                       + window.location.search);
}

工作演示：http: //jsfiddle.net/AndyE/ycmPt/show/

这适用于 Chrome 9、Firefox 4、Safari 5、Opera 11.50 和 IE 10。对于不受支持的浏览器，您始终可以编写一个优雅的降级脚本，在可用的情况下使用它：

 function removeHash () {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

所以你可以去掉井号，只是不是在所有的浏览器中——目前还没有。

注意：如果要替换浏览器历史记录中的当前页面，请使用 replaceState() 而不是 pushState() 。

原文由 Andy E 发布，翻译遵循 CC BY-SA 3.0 许可协议