如何使用 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中文網其他相關文章！