web-dev-qa-db-ja.com

自分のサイトでhistory.jsを実際に使用するにはどうすればよいですか

this 、 this 、および this を含むstackoverflowのhistory.jsに関するすべての投稿を読み、 source code しかし、javascript/jqueryの初心者として、私は実際にhtml 5履歴サポートとie8/9などのhtml4ブラウザーをサポートするフォールバックを実装する方法を理解するのに苦労しています。一貫性のあるURLを可能な限り提示することでUXの利点を理解できるため、これによりディープリンクが解決され、実装したいブックマークが可能になりますが、実際にサイトでこれを使用しようとすると少し迷子になります。

History.jsスクリプトをページに追加した後

私が理解して変更するコードは次のとおりです。

    function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

それは //Change our statesこのコードは履歴コントロールの例を示しているだけなので、すべての新しいコードはどこにありますか？

または、このコードブロック全体の代わりに独自のコードを作成する必要があります（コーディングの新しさを考えると、この時点でjqueryを使用して支援します）。

私はこれを読んでいた 記事 動的なコンテンツの読み込みと私のサイトに実装しようとしています（このコードを動作させることはできますが、ie8/9ではうまく再生されないことを知っています） history.jsと組み合わせる方法を理解しようとする際の問題

また、history.jsがmodernizrでどのように機能するかを理解しようとしていますか？

それはmodernizr.historyの代わりになりますか（テストを行い、.jsのサポートがない場合は典型的なページ読み込みにフォールバックします）、または次のように機能しますか？

if (Modernizr.history) {
   //Code goes here that works if it's HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases?
} else {
   //code from above goes here? with function(window, undefined){...etc...  ?
}
jqueryajaxbrowser-historyhistory.js
24
pappley

履歴サポートをサイトに追加するだけでは、実際にそれを使用する機能が実際に実行されていない限り、何の役にも立ちません。

モダナイズに関する限り、現在のブラウザで履歴がサポートされているかどうか、およびアクションx elseアクションyを実行するかどうかを通知するだけです。

わかりましたので、これが履歴の仕組みです：

マクロレコーダーのようなhistory.jsの種類を検討してください。クライアントが何かをクリックして、作成したURLまたは実際のURLに関連付ける変数をプッシュします。

たとえば、クライアントが検索をクリックすると、次のように呼び出されます。

function search(params) {
  // record your current UI position
  // data (to save), title (to set on page), url (to set on page)
  History.pushState({ params: params }, "Search", "?search");


   // now run whatever should happen because client triggered search()
}

そして今、クライアントが戻るボタンをクリックすると、以前に保存された状態を取得して、それで何かをすることができます。クライアントがバックボタンを押すと、statechangeがトリガーされます。また、そのイベントにサブスクライブしているため、以前に保存した状態を判別し、それに応じてUIを変更する関数を呼び出すことができます。

// Bind to StateChange Event
History.Adapter.bind(window, 'statechange', function() {
  var State = History.getState();

  // returns { data: { params: params }, title: "Search": url: "?search" }
  console.log(State); 

  // or you could recall search() because that's where this state was saved
  if (State.url == "?search") {
    search(data.params);
  }
});

それはほとんどそれを要約しています。クライアントは関数をトリガーし、state/urlを割り当てます。クライアントが戻ると、以前の状態を確認し、UIを復元するか他の関数を復元するかに応じて関数を実行します。

これはすぐに複雑でトリッキーなコードになる可能性があり、説明する必要があるものが他にないので、AHAを入手しただけでない限りは！そして今、何をすべきかを知っている、私は今のところこのことを忘れてしまいます。

saving/restoring状態については、ここで自動的に行われることは絶対にありません。状態が変化した場合に起こることを考慮するために、アプリケーションの他のすべてを手動でコーディングする必要があります。

また、ディープリンクはこれらのこととは関係ありません。アプリケーションには、URLを介して直接呼び出すことに基づいて、アプリケーションを初期化し、特定のUI要素を一意に表示する能力が必要です。履歴は、ユーザーが既にアプリケーションを使用している場合の状態管理専用であるため、back/forwardボタンを押したときに何が起こるかを制御できます。

また、JSを介して行われることはすべて、検索エンジンがjsを気にせず、ページの未加工テキストをインデックスするだけである限り、ゼロのメリットをもたらします。したがって、検索エンジンと互換性のあるディープリンクが必要な場合は、要求されたURLに応じてUIを特定の状態にレンダリングするサーバー側コードが必要です。

30
Robert Hoffmann