如何使用 JavaScript 从 window.location (URL) 中删除哈希而不刷新页面？

Question

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

我尝试了以下解决方案：

window.location.hash = '';

但是，这不会从 URL 中删除哈希符号 #。

Answer 1

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

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

Answer 2

要删除哈希，您可以尝试使用此函数

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 3

下面的怎么样？

window.location.hash=' '

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

---

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

window.location.hash='invalidtag'

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

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

Answer 4

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

Answer 5

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

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

Answer 6

<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?"));
    window.history.replaceState({}, document.title, clean_uri);
}
</script>

将此代码放在头部

Answer 7

我想，这样会更安全

if (window.history) {
    window.history.pushState('', document.title, window.location.href.replace(window.location.hash, ''));
} else {
    window.location.hash = '';
}

Answer 8

if (window.location.href.includes('#')) {
    const cleanedUrl = window.location.href.split('#')[0];
    window.history.replaceState(null, null, cleanedUrl);
}

Answer 9

请尝试以下操作：

window.history.back(1);

Answer 10

这是使用 href 更改位置并清除散列而不滚动的另一种解决方案。

此处解释了神奇的解决方案。规格此处。

const hash = window.location.hash;
history.scrollRestoration = 'manual';
window.location.href = hash;    
history.pushState('', document.title, window.location.pathname);

注意：提议的 API 现在是 WhatWG HTML Living Standard 的一部分

Answer 11

$(window).on('hashchange', function (e) {
    history.replaceState('', document.title, e.oldURL);
});

Answer 12

根据上面给出的答案之一，使用：

var scrollV, scrollH
var loc = window.location;
scrollV = document.body.scrollTop;
scrollH = document.body.scrollLeft;
if ("pushState" in history) {
    history.pushState("", document.title, loc.pathname + loc.search);

    // Restore the scroll offset
    document.body.scrollTop = scrollV;
    document.body.scrollLeft = scrollH;

} else {
    loc.hash = "";

    // Restore the scroll offset
    document.body.scrollTop = scrollV;
    document.body.scrollLeft = scrollH;
}

Answer 13

您可以将 hash 替换为 null

var urlWithoutHash = document.location.href.replace(location.hash , "" );

Answer 14

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

Answer 15

初始问题：

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 16

（太多的答案都是多余且过时的。）现在最好的解决方案是这样的：

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

Answer 17

简洁优雅：

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

Answer 18

您可以按如下方式进行：

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