How to remove the hash from window.location (URL) with JavaScript without page refresh? - Stack Overflow

admin管理员组

文章数量:1126294

I have URL like: #something, how do I remove #something, without causing the page to refresh?

I attempted the following solution:

window.location.hash = '';

However, this doesn't remove the hash symbol # from the URL.

I have URL like: http://example.com#something, how do I remove #something, without causing the page to refresh?

I attempted the following solution:

window.location.hash = '';

However, this doesn't remove the hash symbol # from the URL.

• javascript
• window.location
• fragment-identifier

Share Improve this question Follow edited Jul 10, 2017 at 6:44 Rahul Gupta 10.1k77 gold badges6464 silver badges6969 bronze badges asked Sep 9, 2009 at 2:59 Tom LehmanTom Lehman 89.1k7272 gold badges204204 silver badges279279 bronze badges 6

• 4 Do you really want to do this? It'll cause a page refresh. – seth Commented Sep 9, 2009 at 3:08
• 16 Is it possible to do without a page refresh? – Tom Lehman Commented Sep 9, 2009 at 3:11
• 1 It is possible. AJAX history libraries deal with it. But it's not easy, and it has to be done differently for almost every browser. Not something you wanna get into. – Gabriel Hurley Commented Sep 9, 2009 at 3:14
• Is there any conciderations with leaving a "#" behind other than a visual one? – user29660 Commented Aug 16, 2016 at 10:55
• Possible duplicate of Modify the URL without reloading the page – PayteR Commented Sep 10, 2017 at 12:53

 |  Show 1 more comment

18 Answers 18

Sorted by: Reset to default 696

Solving this problem is much more within reach nowadays. The HTML5 History API allows us to manipulate the location bar to display any URL within the current domain.

function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                                       + window.location.search);
}

Working demo: http://jsfiddle.net/AndyE/ycmPt/show/

This works in Chrome 9, Firefox 4, Safari 5, Opera 11.50 and in IE 10. For unsupported browsers, you could always write a gracefully degrading script that makes use of it where available:

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

So you can get rid of the hash symbol, just not in all browsers — yet.

_{Note: if you want to replace the current page in the browser history, use replaceState() instead of pushState().}

Initial question:

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

or

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

both will return the URL without the hash or anything after it.

With regards to your edit:

Any change to window.location will trigger a page refresh. You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page), but you can't get rid of the hash sign. Take your pick for which is worse...

MOST UP-TO-DATE ANSWER

The right answer on how to do it without sacrificing (either full reload or leaving the hash sign there) is up here. Leaving this answer here though with respect to being the original one in 2009 whereas the correct one which leverages new browser APIs was given 1.5 years later.

(Too many answers are redundant and outdated.) The best solution now is this:

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

Simple and elegant:

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

You can do it as below:

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

This will remove the trailing hash as well. eg: http://test.com/123#abc -> http://test.com/123

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

To remove the hash, you may try using this function

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

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

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

How about the following?

window.location.hash=' '

Please note that am setting the hash to a single space and not an empty string.

---

Setting the hash to an invalid anchor does not cause a refresh either. Such as,

window.location.hash='invalidtag'

But, I find above solution to be misleading. This seems to indicate that there is an anchor on the given position with the given name although there isn't one. At the same time, using an empty string causes page to move to the top which can be unacceptable at times. Using a space also ensures that whenever the URL is copied and bookmarked and visited again, the page will usually be at the top and the space will be ignored.

And, hey, this is my first answer on StackOverflow. Hope someone finds it useful and it matches the community standards.

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

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

put this code on head section

I think, it would be more safe

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

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

Try the following:

window.history.back(1);

Here is another solution to change the location using href and clear the hash without scrolling.

The magic solution is explained here. Specs here.

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

NOTE: The proposed API is now part of WhatWG HTML Living Standard

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

Building off one of the answers given above, use this:

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

You can replace hash with null

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

本文标签： How to remove the hash from windowlocation (URL) with JavaScript without page refreshStack Overflow