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

このアプローチにより、ハッシュ シンボルが排除され、異なるブラウザ間での互換性が確保されます。ページを起こさずに

注:

• 新しい履歴エントリを追加する代わりに現在の履歴エントリを置き換えるには、「pushState()」の代わりに「replaceState()」を使用します。 ".
• ハッシュの削除はブラウザのサポートに依存します。ただし、このソリューションは、サポートされているブラウザとサポートされていないブラウザの両方をカバーする包括的なアプローチを提供します。

以上がJavaScript を使用してページを更新せずに URL ハッシュを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。