[解決済み] jquery: リダイレクトせずにURLアドレスを変更する？重複

質問

重複の可能性があります。

AJAXアプリのアドレスバーのURLを現在の状態に合わせて変更する

ページをリダイレクトせずにURLアドレスを変更するにはどうすればよいですか？

例えば、下のこのリンクをクリックしたとき。

<a href="http://mysite.com/projects/article-1" class="get-article">link</a>

リンク先からURLを取得します。

var path = object.attr('href');

以下のようにすると、ページがリダイレクトされます。

window.location = path;

次のようなことをしたい。 サイト をクリックすると、ajax呼び出しは要求されたページを取得し、ウィンドウ上のURLアドレスも変更され、クリックしたものへのパスがあるようにします。

どのように解決するのですか？

注意してください。 history.pushState() は現在サポートされています。

あなたは できない はリダイレクトせずにURL全体を変更することはできませんが、代わりにできることは ハッシュ .

は ハッシュ は、URL の # 記号の後に続く部分です。これは当初、HTML文書のセクションを（ローカルに）指示するためのものでしたが、javascriptで読み込んで修正することで、それを利用することができるようになります をグローバル変数のように使用することができます。 .

うまく適用すれば、このテクニックは2つの点で役に立ちます。

1. ブラウザーの履歴が、（URL+ハッシュが変更されて以来）あなたが行った異なるステップをそれぞれ記憶します。
2. を使用すると、特定の html ドキュメントにリンクするだけでなく、javascript に何をすべきかの手がかりを与えるアドレスを持つことができます。つまり、最終的には Web アプリ内の状態を指すことになります。

ハッシュを変更するには、次のようにします。

document.location.hash = "show_picture";

ハッシュの変化を見るには、次のようなことをする必要があります。

window.onhashchange = function(){
    var what_to_do = document.location.hash;    
    if (what_to_do=="#show_picture")
        show_picture();
}

もちろん、ハッシュは単なる文字列なので、好きなように使うことができます。例えば、JSONを使用している場合、そこにオブジェクト全体を置くことができます。 文字列化 として文字列化すれば、オブジェクト全体をそこに置くことができます。

それを使って高度なことをするために、非常に優れたJQueryライブラリがあります。