web-dev-qa-db-ja.com

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

次のような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がそれに影響を及ぼします。

javascriptjavascript-eventsaddress-bar
28
JoshNaro

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

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

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

36
ThiefMaster

setTimeout/intervalを使用して現在のアドレスを定期的に確認します。

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

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

つまり：

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
}
6
Skawful

SWFaddress は、このような種類の優れたライブラリです。

0
moritzstefaner