小编典典

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

all

我有类似的 URL:http://example.com#something,我如何删除#something,而不导致页面刷新?

我尝试了以下解决方案:

window.location.hash = '';

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


阅读 96

收藏
2022-03-24

共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 年后给出的。

如今,解决这个问题更加触手可及。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.50IE 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().

2022-03-24