web-dev-qa-db-ja.com

ページを更新せずにJavaScriptでwindow.location（URL）からハッシュを削除する方法？

http://example.com#somethingのようなURLがありますが、ページを更新せずに#somethingを削除するにはどうすればよいですか？

私は以下の解決策を試みました。

window.location.hash = '';

ただし、これはURLからハッシュ記号#を削除しません。

javascriptwindow.locationfragment-identifier
293
Tom Lehman

最初の質問：

window.location.href.substr(0, window.location.href.indexOf('#'))

または

window.location.href.split('#')[0]

どちらもURLをハッシュなしで返します。

あなたの編集に関して：

window.locationを変更すると、ページが更新されます。更新をトリガーせずにwindow.location.hashを変更することはできますが（ハッシュがページ上のIDと一致するとウィンドウはジャンプします）、ハッシュ記号を削除することはできません。悪い方に選んでください...

最も最新の回答

犠牲にすることなくそれを実行する方法（正しいリロードまたはそこにハッシュ記号を残す）の正しい答えは、 ここを下に です。この答えをここに残すことは2009年に最初のものであることに関してではあるが、新しいブラウザAPIを活用する正しいものは1。5年後に与えられた。

189
Gabriel Hurley

この問題を解決することは、今日でははるかに手の届くところにあります。 HTML5 History API により、ロケーションバーを操作して現在のドメイン内の任意のURLを表示することができます。

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

実用的なデモ： http://jsfiddle.net/AndyE/ycmPt/show/

これはChrome 9、Firefox 4、Safari 5、Opera 11.50で動作します。and in IE 10。利用可能：

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

だから、あなたはハッシュ記号を取り除くことができます、ただすべてのブラウザでそうではありません - それでも。

注：ブラウザ履歴の現在のページを置き換える場合は、replaceState()の代わりにpushState()を使用してください。

532
Andy E

（あまりにも多くの答えが冗長で古くなっています。）今の最善の解決策はこれです：

history.replaceState(null, null, ' ');
46
Pacerier

シンプルでエレガント：

history.replaceState({}, document.title, ".");  // replace / with . to keep url
39
cprcrack

ハッシュを削除するには、この関数を使ってみてください。

function remove_hash_from_url()
{
    var uri = window.location.toString();
    if (uri.indexOf("#") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("#"));
        window.history.replaceState({}, document.title, clean_uri);
    }
}
15
Rahul Gupta

末尾のハッシュも削除されます。例： http://test.com/123#abc - > http://test.com/12

if(window.history.pushState) {
    window.history.pushState('', '/', window.location.pathname)
} else {
    window.location.hash = '';
}
11
Chris Gunawardena

以下はどうですか？

window.location.hash=' '

ハッシュを空の文字列ではなく単一のスペースに設定していることに注意してください。

ハッシュを無効なアンカーに設定しても更新されません。といった、

window.location.hash='invalidtag'

しかし、上記の解決策は誤解を招くものだと思います。これは、指定された位置に指定された名前のアンカーがないことを示しているようです。同時に、空の文字列を使用すると、ページが最上部に移動します。スペースを使用すると、URLがコピーされてブックマークされ、またアクセスされたときにも必ずページが最上部に表示され、スペースは無視されます。

そして、ねえ、これがStackOverflowに関する私の最初の答えです。誰かがそれが有用であり、それがコミュニティの基準と一致することを願います。

5
Nibras Reeza
const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);
5
Casey
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?"));
    window.history.replaceState({}, document.title, clean_uri);
}
</script>

このコードを頭の部分に書いてください

3
Manigandan Raamanathan

あなたは以下のようにそれをすることができます：

history.replaceState({}, document.title, window.location.href.split('#')[0]);

3
METALHEAD

以下を試してください。

window.history.back(1);
1
Vishal Sharma
  $(window).on('hashchange', function (e) {
        history.replaceState("", document.title, e.originalEvent.oldURL);
    });
1
JohnMathew

これは、hrefを使用して場所を変更し、スクロールせずにハッシュを消去する別の解決策です。

魔法の解決法は ここで で説明されています。スペック ここ 。

const hash = window.location.hash;
history.scrollRestoration = 'manual';
window.location.href = hash;    
history.pushState('', document.title, window.location.pathname);

注：提案されたAPIは、WhatWG HTML Living Standardの一部になりました

0
voscausa