如何使用 JavaScript 删除 URL 哈希而不刷新页面？

使用 JavaScript 在不刷新页面的情况下从 URL 中删除哈希

当您遇到类似“http://example.com#something”的 URL 时末尾有一个哈希组件 (#)，在不刷新页面的情况下删除它可能具有挑战性。将“window.location.hash”设置为空字符串的传统方法无法删除哈希符号本身。

解决方案：HTML5 History API

现代浏览器提供通过 HTML5 History API 的解决方案。通过利用“history.pushState()”函数，我们可以修改地址栏以显示新的 URL，而无需触发页面刷新。

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

此方法有效地从当前和中的 URL 中删除哈希值。兼容浏览器，包括 Chrome、Firefox、Safari、Opera 和 Internet Explorer 10 及更高版本。

不受支持的优雅降级浏览器

对于不支持History API的浏览器，您可以使用优雅的降级脚本：

function removeHash() {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Preserve current scroll position
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore scroll position
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

这种方法确保了不同浏览器之间的兼容性，消除了哈希符号，而无需引起页面

注意：

• 要替换当前历史条目而不是添加新条目，请使用“replaceState()”而不是“pushState()” ".
• 删除哈希取决于浏览器支持。但是，此解决方案提供了一种全面的方法，涵盖支持和不支持的浏览器。

以上是如何使用 JavaScript 删除 URL 哈希而不刷新页面？的详细内容。更多信息请关注PHP中文网其他相关文章！