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

Question

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

我尝试了以下解决方案:

window.location.hash = '';

但是,这不会#从URL中删除哈希符号.

Answer 1

现在解决这个问题的范围更大.在HTML5历史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().}

Answer 2

初步问题:

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

Answer 3

(太多的答案是多余的和过时的.)现在最好的解决方案是:

history.replaceState(null, null, ' ');

Answer 4

简洁优雅:

history.replaceState({}, document.title, ".");  // replace / with . to keep url

Answer 5

要删除哈希,您可以尝试使用此功能

function remove_hash_from_url()
{
    var uri = window.location.toString();
    if (uri.indexOf("#") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("#"));
        window.history.replaceState({}, document.title, clean_uri);
    }
}

Answer 6

你可以这样做：

history.replaceState({}, document.title, window.location.href.split('#')[0]);

Answer 7

这也将删除尾随哈希.例如:http://test.com/123#abc - > http://test.com/123

if(window.history.pushState) {
    window.history.pushState('', '/', window.location.pathname)
} else {
    window.location.hash = '';
}

Answer 8

const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);

Answer 9

接下来呢？

window.location.hash=' '

请注意，请将哈希设置为单个空格而不是一个空字符串。

将哈希设置为无效的锚也不会导致刷新。如，

window.location.hash='invalidtag'

但是，我发现上述解决方案具有误导性。这似乎表明在给定位置上具有给定名称的锚点，尽管没有。同时，使用空字符串会导致页面移到顶部，这有时是不可接受的。使用空格还可以确保每当复制URL并添加书签并再次访问该URL时，页面通常将位于顶部，并且空格将被忽略。

而且，嘿，这是我对StackOverflow的第一个答案。希望有人觉得它有用，并且符合社区标准。

Answer 10

function removeLocationHash(){
    var noHashURL = window.location.href.replace(/#.*$/, '');
    window.history.replaceState('', document.title, noHashURL) 
}

window.addEventListener("load", function(){
    removeLocationHash();
});