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

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

我尝试了以下解决方案：

window.location.hash = '';

但是，这并没有从URL中删除哈希符号#。

您真的要这样做吗？它将导致页面刷新。

是否可以在不刷新页面的情况下进行操作？

有可能的。 AJAX历史记录库处理它。但这并不容易，并且几乎每个浏览器都必须以不同的方式进行操作。不是您想进入的内容。

除了可视外观之外，是否还有其他考虑要考虑？

在不重新加载页面的情况下修改URL的可能重复项

#1 楼

最初的问题：

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

或

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

两者都将返回不带哈希值或其后任何内容的URL 。

关于您的编辑：

对window.location的任何更改都会触发页面刷新。您可以在不触发刷新的情况下更改window.location.hash（尽管如果您的哈希值与页面上的ID相匹配，则窗口将跳出），但是您无法摆脱哈希符号。选择最差的选择...

最新的答案

正确的答案，如何做到不牺牲（完全重新加载或离开哈希符号）在这里。不过，就2009年的原始版本而言，此答案留在了这里，而1.5年后给出了利用新浏览器API的正确版本。

这是完全错误的，您可以更改window.location.hash，并且不会触发刷新。

–Evgeny
10-10-31在20:21

@Evgeny-这就是我的回答。我明确地说，更改window.location.hash不会触发刷新。 “您可以在不触发刷新的情况下更改window.location.hash（尽管如果您的哈希值与页面上的ID匹配，则窗口将跳转）”。

–加布里埃尔·赫利（Gabriel Hurley）
2010-10-31 22:29

没有页面重新加载-这是问题所在。这不是答案，因为它需要/强制重新加载页面！

– Ed_
2012年5月28日下午16:56

也认为这不应该是✓answer

–阿尔伯尼尔
2012年6月19日下午13:38

这不是对OP问题的答案。

–布莱斯
13年11月14日23:42

#2 楼

如今，解决此问题的能力远远超过了。 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()。

使用此行来确保您不会丢失查询字符串：history.pushState（“”，document.title，window.location.pathname + window.location.search）;

–菲尔·库拉克（Phil Kulak）
2012年3月13日15:56

@Phil：感谢您指出，我已经相应更新了答案。我也习惯使用漂亮的URL。

– Andy E
2012年3月13日17:32

对于较旧版本的IE，似乎您需要使用document.documentElement而不是document.body。看到这个答案stackoverflow.com/a/2717272/359048

– Jasonmcclurg
13年8月14日在23:09

我建议使用replaceState而不是pushState，以免在浏览器历史记录中创建额外的条目。

–尼科
2013年10月6日13:12

@santiagoarizti：你是对的，我只是得出了相同的结论。我没有正确检查我（7年前！）编写的代码，却错过了删除哈希值时还要切换按钮的状态。我想，由于您是手动更改哈希，因此您总是可以自己触发事件。

– Andy E
18-10-23在15:30

#3 楼

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

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

如果要保留历史记录，请改用history.pushState（null，null，''）。

–nichijou
19年1月5日，12：47

解释为state和title参数传递null最终会做什么是有用的。

–V。Rubinetti
19年2月1日在14:46

剩下的一个问题是，即使散列现在不存在，它也不会触发onhashchange。

–柯蒂斯
19-09-19在21:46

在TypeScript中，第二个参数不允许为null，因为该命令采用字符串。 Mozilla建议使用空字符串。

–柯蒂斯
19-09-19在22:00

#4 楼

简洁大方：

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

如果要保留在同一目录中，请使用点而不是斜杠

–vahanpwns
2015年6月11日14:00

请使用@vahanpwns注意事项更新答案。代替 /。使用/将URL更改为根路径。

–艾萨克·格雷格森（Isaac Gregson）
15年6月26日在7:05

感谢您的答复，我修改了history.replaceState（{}，document.title，location.href.substr（0，location.href.length-location.hash.length）））;对于我的用例。

–斯科特·荣格斯（Scott Jungwirth）
15-10-16在23:43

这不会保留url查询。

–弗拉迪斯拉夫·科斯坚科
17年6月26日在20:15

我的用例也是替换而不是推，但这对我来说更有意义：history.replaceState（null，document.title，location.pathname + location.search）;

– MDMower
17-10-25在6:57

#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);
    }
}

#6 楼

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

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

这将删除URL中存在的所有查询参数:(

–kevgathuku
18年8月2日在11:53

@kevgathuku，您可以使用location.search将它们添加回去，例如：window.history.pushState（''，'/'，window.location.pathname + window.location.search）`

–克里斯·古纳瓦德纳（Chris Gunawardena）
18年8月2日在12:04

#7 楼

您可以按照以下步骤进行操作：

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

标有星号的答案在任何情况下均不适用于我，但此方法却可以。谢谢！

–开发
4月29日1:47

#8 楼

接下来呢？

window.location.hash=' '

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

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

window.location.hash='invalidtag'

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

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

将哈希设置为空格仍将＃保留在URL的末尾，我认为目标是将其完全删除。

– mahemoff
16-2-4在12:18

它在URL的末尾尾随哈希。问题是如何删除它。

– Gurmeet Singh
17年9月11日下午5:56

是的，我们如何也可以使用哈希字符串删除＃。

–巴文·图马尔（Bhavin Thummar）
19年5月29日在11:02

#9 楼

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

尽管此代码可以回答问题，但提供有关此代码为何和/或如何回答问题的其他上下文，可以提高其长期价值。

–rollstuhlfahrer
18年4月2日在7:07

#10 楼

<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>

将此代码放在头部

#11 楼

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

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

#12 楼

我认为这样会更安全

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

#13 楼

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

#14 楼

请尝试以下操作：

window.history.back(1);

如果用户直接进入包含哈希的URL，这不会回答问题。

–nickb
2014年1月5日在2:57

当您只想创建指向上一页的链接时，此技巧非常有用，但是该链接隐藏在许多js文件中。

–ValidfroM
14年4月15日在16:55

正是我想要的。这非常适合删除我的Web应用程序刚刚创建的主题标签，以便使用javasript函数返回的值。

–user278859
18年6月7日在5:53

#15 楼

这是另一种使用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的一部分

#16 楼

您可以将null替换为

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

该问题询问“不导致页面刷新”，但是此方法确实刷新了页面。您应该在回答中注意到这一事实，因此我们不必都浪费时间直接了解您正在回答的问题与我们实际试图在此处回答的问题不同。

–弗拉基米尔·科纳（Vladimir Kornea）
2015年1月9日，0：41

它不会刷新页面。

–人
16年7月1日在10:08

编程黑洞网