これが私のWebサイトでのイベントの流れです
[http://example.com] にアクセスします。ブラウザのアドレスバーに http://example.com と表示されていても、Webページにはhttp://example.com/fooのコンテンツが表示されます
Web ページ上のテキストは、ユーザーにチェックアウト バーを要求します。ユーザーがリンクをクリックすると、
[http://example.com/bar]
Web ページのテキストは、ユーザーに baz をチェックアウトするよう求めています。ユーザーがリンクをクリックすると、
[http://example.com/baz]
Web ページのテキストは、ユーザーに qux をチェックアウトするように求めています。ただし、ユーザーがブラウザの戻るボタンをクリックすると、
[http://example.com/bar]
Web ページのテキストは、ユーザーに baz をチェックアウトするよう求めています。しかし、ユーザーがブラウザの戻るボタンをクリックすると、... FAIL! に移動します。これは、ブラウザ バーが [http://example.com] になるはずの場所ですが、まったく変わりません。
これらすべてを実装するコードはかなり単純です
var goTo: function(uri) {
get uri via XMLHttpRequest
swap content
history.pushState(null, null, uri);
}
window.addEventListener("popstate", function(event) {
var uri = location.pathname.replace("\/", "");
goTo(uri);
}, false);