javascript - JavaScriptでアドレスバーの変更を検出するにはどうすればよいですか？

Question

次のようなURLを持つ可能性のあるAjaxの重いアプリケーションがあります

http://example.com/myApp/#page=1

ユーザーがサイトを操作すると、アドレスバーが次のように変わる可能性があります

http://example.com/myApp/#page=5

ページをリロードせずに。

私の問題は次のシーケンスです：

1. ユーザーが最初のURLをブックマークします。
2. ユーザーは、2番目のURLが現在の状態になるようにアプリケーションを操作します。
3. ユーザーは、手順1で作成したブックマークをクリックします。
4. アドレスバーのURLがhttp://example.com/myApp/#page=5からhttp://example.com/myApp/#page=1に変わりますが、を検出する方法がわかりません。変化が起こった。

変更を検出すると、JavaScriptがそれに基づいて動作します。

Answer 1

HTML5では、タイマーでポーリングせずにURLハッシュ変更の通知を登録できるhashchangeイベントが導入されています。

すべての主要なブラウザー（Firefox 3.6、IE8、Chrome、その他のWebkitベースのブラウザー）でサポートされていますが、イベントを処理するライブラリを使用することを強くお勧めします。つまり、サポートされていないブラウザーでタイマーを使用します。 HTML5イベントおよびそれ以外の場合のイベントの使用。

window.onhashchange = function() {
    alert("hashtag changed");
};

イベントの詳細については、https：//developer.mozilla.org/en/dom/window.onhashchangeおよびhttp://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29を参照してください。 aspx。

Answer 2

setTimeout/intervalを使用して現在のアドレスを定期的に確認してください。

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second

Answer 3

バインドできるイベントを公開するには、ロケーションオブジェクトを拡張する必要があります。

すなわち：

window.location.prototype.changed = function(e){};

(function() //create a scope so 'location' is not global
{
    var location = window.location.href;
    setInterval(function()
    {
        if(location != window.location.href)
        {
            location = window.location.href;
            window.location.changed(location);
        }
    }, 1000);
})();

window.location.changed = function(e)
{
    console.log(e);//outputs http://newhref.com
    //this is fired when the window changes location
}

Answer 4

SWFaddressは、これらのタイプのもののための優れたライブラリです。