web-dev-qa-db-ja.com

ページをリロードせずにJavaScriptでURLのフラグメントを削除します

背景：特定のコンテンツを展開できるHTMLページがあります。このような拡張にはページのごく一部のみをロードする必要があるため、新しいURL/HTMLページに誘導するのではなく、JavaScriptを使用してロードします。ただし、ボーナスとして、ユーザーはこのような展開されたセクションにパーマリンクすることができます。

http://example.com/#foobar

その「foobar」カテゴリを他のユーザーに対してすぐに開くようにします。これはparent.location.hash = 'foobar'を使用して機能するため、その部分は問題ありません。

次の質問：ユーザーがページでそのようなカテゴリを閉じたとき、URLフラグメントを再び空にしたい、つまり http： //example.com/#foobar into http://example.com/ でパーマリンクの表示を更新します。ただし、parent.location.hash = ''を使用してこれを行うと、ページ全体のリロードが発生します（たとえば、Firefox 3）。これは回避したいものです。 window.location.href = '/#'を使用してもページのリロードはトリガーされませんが、URLにやや見苦しい "＃"記号が残ります。ページ更新をトリガーせずに「＃」記号を含むURLアンカーをJavaScriptで削除する方法は、一般的なブラウザーにありますか？

javascripthtmlurlfragment-identifier
42
Philipp Lenssen

他の人が言及したように、HTML5の replaceState を使用してURLフラグメントを削除できます。

次に例を示します。

// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");

// slice off the remaining '#' in HTML5:    
if (typeof window.history.replaceState == 'function') {
  history.replaceState({}, '', window.location.href.slice(0, -1));
}
48
Matmas

ハッシュ値に対するアクションを制御しているので、「#_」や「#default」などの「nothing」を意味するトークンを単に使用しないでください。

14
Diodeus - James MacFarlane

申し訳ありませんが、location.hashを空にしてもタスクが完了しない場合、答えはノーです！-）

7
roenving

ASCIIcasts 246で説明されているように、光沢のある新しいHTML5 window.history.pushStateおよびreplaceStateメソッドを使用できます：AJAX History State および GitHubブログ 。これにより、フラグメントだけでなく（同じOriginホスト内で）パス全体を変更できます。この機能を試すには、 GitHubリポジトリ を最新のブラウザーでブラウズします。

4
Chris Boyle

ハッシュを使用する代わりに別のオプションもあります。javascript: void(0);を使用できます。例：<a href="javascript:void(0);" class="open_div">Open Div</a>

また、その種のリンクがいつ必要かにも依存するため、次のリンクを確認することをお勧めします。

使用方法： http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ またはこちらの方が良いかどうかの議論を確認してください： 「href」の値はJavaScriptリンクに使用すべきか、「＃」または「javascript：void（0）」？

1
jazkat

このコードをheadセクションに配置します。

<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>
0
Manigandan Raamanathan

だから使用する

parent.location.hash = '' 最初

それから

window.location.href=window.location.href.slice(0, -1);
0
brando