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


332

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

我尝试了以下解决方案:

window.location.hash = '';

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


3
您真的要这样做吗?它将导致页面刷新。
赛斯

9
是否可以在不刷新页面的情况下进行操作?
汤姆·雷曼

1
可能的。AJAX历史记录库处理它。但这并不容易,并且几乎每个浏览器都必须以不同的方式进行操作。不是您想进入的东西。
加布里埃尔·赫尔利

除了视觉符号之外,是否还有其他考虑要留下“#”?
user29660 '16

Answers:


210

最初的问题:

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的正确答案。


22
这是完全错误的,您可以更改window.location.hash,并且不会触发刷新。
叶夫根尼(Evgeny)2010年

61
@Evgeny-这就是我的回答。我明确地说,更改window.location.hash不会触发刷新。“您可以在不触发刷新的情况下更改window.location.hash(尽管如果您的哈希值与页面上的ID匹配,则窗口将跳转)”。
加布里埃尔·赫尔利

3
没有页面重新加载-这就是问题所在。这不是答案,因为它需要/强制重新加载页面!
Ed_ 2012年

10
也觉得不应该是✓answer
abernier

4
这不是对OP问题的答案。
布莱斯

585

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


9
使用以下行来确保您不会丢失查询字符串:history.pushState(“”,document.title,window.location.pathname + window.location.search);
Phil Kulak

6
@Phil:感谢您指出这一点,我相应地更新了答案。我也习惯使用漂亮的URL。
Andy E

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

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

1
@santiagoarizti:你是对的,我只是得出了相同的结论。我没有正确检查我(7年前!)编写的代码,却错过了在删除哈希值时也切换按钮状态的方法。我想,由于您是手动更改哈希,因此您总是可以自己触发事件。
安迪E

85

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

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

5
使用history.pushState(null, null, ' '),如果你想保留历史来代替。
nichijou

9
解释和参数传递null的最终结果可能有用。statetitle
V. Rubinetti

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

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

41

简洁大方:

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

3
如果要保留在同一目录中,请使用点而不是斜杠
vahanpwns 2015年

1
关于@vahanpwns注意,请更新答案,以.代替/。使用/将URL更改为根路径。
艾萨克·格雷格森

5
感谢您提供此答案,我将其修改history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));为我的用例。
Scott Jungwirth,2015年

5
这不会保留url查询。
弗拉迪斯拉夫·科斯坚科

2
我的用例也是替换而不是推,但这对我来说更有意义:history.replaceState(null, document.title, location.pathname + location.search);
MDMower

16

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

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

13

这也将删除尾随哈希。例如: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

1
@kevgathuku,您可以使用location.search将其添加回去,例如:window.history.pushState('','/',window.location.pathname + window.location.search)'
克里斯·冈纳沃德娜

6

接下来呢?

window.location.hash=' '

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


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

window.location.hash='invalidtag'

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

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


7
将哈希设置为空格仍将#保留在URL的末尾,我认为目标是将其完全删除。
mahemoff '16

1
它在URL的末尾尾随哈希。问题是如何删除它。
Gurmeet Singh'9

是的,我们如何也可以使用哈希字符串删除#。
Bhavin Thummar

6

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

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


1
标有星号的答案在任何情况下都不适用于我,但此方法却可以。谢谢!
开发人员

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

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

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

将此代码放在头部


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

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

2

我认为这样会更安全

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

0

请尝试以下操作:

window.history.back(1);

23
如果用户直接进入包含哈希的URL,这不会回答问题。
nickb 2014年

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

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

0

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


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

-1

您可以将null替换为null

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

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

它不会刷新页面。
西普里安
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.