How Can I Remove a URL Hash Without Refreshing the Page Using JavaScript?

Removing Hash from URL Without Page Refresh Using JavaScript

When working with URLs, it is often desirable to remove the hash fragment (#something) without causing the page to refresh. This can be achieved using the HTML5 History API, which allows for manipulation of the location bar.

One solution is:

window.location.hash = '';

However, this only removes the hash's content, leaving the # symbol in the URL.

For a more comprehensive solution:

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

This method works in Chrome, Firefox, Safari, Opera, and IE 10. For browsers that do not support it, a graceful degradation script can be used:

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 current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore scroll offset to avoid flickering
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

By utilizing this technique, you can effectively remove the hash from a URL without causing the page to refresh, regardless of browser support.

The above is the detailed content of How Can I Remove a URL Hash Without Refreshing the Page Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!