HTML5/jQuery：pushStateとpopState - ディープリンク？

Question

最初に私はpushState関数の最初のパラメータが何であるのか分かりませんでしたか？私はそれに何を渡すのですか？私は単に私のページをスクロールするときにURLを変更したい。私はビューポート内の現在の要素のIDを照会しており、そのIDもURL内のリンクである必要があります。それは下のコードで正常に動作します。私は私のページをスクロールしたときにアドレスバーにURLが正常に変更今

1）：

var currentHash, 
     url; 

    if (history && history.pushState) { 

     $(window).scroll(function() { 
      hash = $('.layer:in-viewport').attr('id'); 
      catHash = $("#"+hash).parent('section').attr('id'); 

      var data = "nothing"; 

      if (catHash != undefined) 
       url = "/" + catHash + "/" + hash; 
      else 
       url = "/" + hash; 

      if (currentHash != hash) { 

       window.history.pushState(data, hash, url); 

      } 

      currentHash = hash; 

     }); 

    } 

は今、私は2つの質問があります。最初にページを読み込むときに、どのようにアドレスバーのURL /ハッシュをクエリできますか。だから私は今のようなリンクを持っていると想像してくださいwww.url.com/deep私は/奥が何であるかを知りたいですか？ top.location全体をクエリし、それぞれの "/"で分割するだけでいいですか？私はそれらのリンクが実際に存在しないことを意味するので、pushState関数で操作したURLを呼び出すときに404ページを避けるにはどうすればよいですか？

2.）戻るボタンをクリックしたときにアドレスバーの最後の変更を確認するにはどうすればよいですか？だから私は/deepをブラウザのバックボタンをクリックすると見つけたいので、私はそのページのその位置に戻ることができます。おそらくこれはポップステートで動作していると思いますが、私はどのように見つけられませんでした！

ありがとうございました！

更新：

window.history.pushState("test", hash, url); 

...

$(window).bind('popstate', function(event){ 
     console.log(event.data); 
    }); 

これはなかれnullです。これは "テスト"を返してはいけませんか？

Answer 1

pushState関数の最初のパラメータは何ですか？状態オブジェクトはpushState（によって作成された新しい履歴エントリに関連付けられているJavaScriptオブジェクトである） - the documentation

状態オブジェクトから

。ユーザーが新しい状態にナビゲートするたびに、popstateイベントが発生し、イベントのstateプロパティに履歴エントリの状態オブジェクトのコピーが含まれます。

これは、あなたがその状態に戻ったときに戻ってくるあなたの選択したデータの束です。

現在、ページをスクロールすると、アドレスバーのURLが正常に変更されます。最初にページを読み込むときに、どのようにアドレスバーのURL /ハッシュをクエリできますか。

locationオブジェクトを見てください。しかし、あなたはそうする必要はありません。あなたはページサーバーの側に（そしてそれを）配置する必要があります。これはpushStateの利点の1つですが、JavaScriptが利用できず、サーバー側のフォールバックがスムーズに統合されていれば、リンクは引き続き機能します。

バックボタンをクリックしたときにアドレスバーの最後の変更を確認するにはどうすればよいですか？

イベントリスナー（popStateイベントを探している）を追加すると、そのイベントオブジェクトに格納されているデータがイベントオブジェクトで使用できるようになります。 MDN has an example

Answer 2

jQueryの抄録アウトイベントオブジェクトを、あなたが欲しい：event.originalEvent.state;