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

Removing the URL Hash Fragment Without Refresh

In today's modern web development landscape, removing the hash fragment (#something) from a URL (e.g., http://example.com#something) is a common requirement. While a straightforward approach like setting "window.location.hash = ''" may seem intuitive, it doesn't completely resolve the issue.

To effectively remove the hash without refreshing the page, we turn to the HTML5 History API. This API provides the ability to manipulate the URL in the location bar within the current domain.

The following JavaScript function leverages the HTML5 History API to remove the hash fragment:

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

This code snippet replaces the current URL with a new one without the hash fragment, pushing the new state onto the browser history. It works seamlessly in modern browsers like Chrome, Firefox, Safari, Opera, and even IE 10.

For browsers that do not support the History API, a graceful degradation approach can be employed:

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

This extended function ensures hash removal in browsers that lack History API support, preserving the page scroll position to minimize visual disruption.

Using these techniques, you can efficiently remove the hash fragment from a URL without triggering a page refresh, providing a seamless user experience across various browsers.

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