ページを更新せずに URL ハッシュ フラグメントを削除するにはどうすればよいですか?

更新せずに URL ハッシュ フラグメントを削除する

今日の Web 開発環境では、URL からハッシュ フラグメント (#something) を削除します (例: http://example.com#something) は一般的な要件です。 「window.location.hash = ''」を設定するような単純なアプローチは直感的に見えるかもしれませんが、問題を完全に解決するわけではありません。

ページを更新せずに効果的にハッシュを削除するには、HTML5 を使用します。履歴API。この API は、現在のドメイン内のロケーション バーの URL を操作する機能を提供します。

次の JavaScript 関数は、HTML5 History API を利用してハッシュ フラグメントを削除します。

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

このコードスニペットは、現在の URL をハッシュ フラグメントのない新しい URL に置き換え、新しい状態をブラウザ履歴にプッシュします。 Chrome、Firefox、Safari、Opera、さらには IE 10 などの最新のブラウザでもシームレスに動作します。

History API をサポートしていないブラウザの場合は、グレースフル デグラデーション アプローチを採用できます。

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

この拡張機能は、History API サポートのないブラウザでハッシュを削除し、ページのスクロール位置を維持して視覚的な影響を最小限に抑えます。

これらの手法を使用すると、ページの更新をトリガーせずに URL からハッシュ フラグメントを効率的に削除でき、さまざまなブラウザ間でシームレスなユーザー エクスペリエンスを提供できます。

以上がページを更新せずに URL ハッシュ フラグメントを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。