ホームページ > ウェブフロントエンド > jsチュートリアル > リロードせずに JavaScript で URL のハッシュを簡単に削除する方法

リロードせずに JavaScript で URL のハッシュを簡単に削除する方法

Barbara Streisand
リリース: 2024-11-30 04:11:10
オリジナル
414 人が閲覧しました

How to Effortlessly Remove a URL's Hash in JavaScript Without Reloading?

JavaScript を使用した URL のハッシュの簡単な削除

Q: http://example.com#something のような URL がありますが、ページを更新せずに #something を削除したいです。 「window.location.hash = ''」を使用しても機能しませんでした。

A: HTML5 History API は洗練されたソリューションを提供します。これは、トリックを実行する JavaScript 関数です:

function removeHash () {
    history.pushState("", document.title, window.location.pathname
                                                       + window.location.search);
}
ログイン後にコピー

これは、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 current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset to prevent flickering
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}
ログイン後にコピー

このソリューションは普遍的ではない可能性があります互換性がありますが、History API をサポートしていないブラウザに対して正常な機能低下が提供されます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート