24

thisthisthisなど、stackoverflow の history.js に関するすべての投稿を読み、ソース コードを調べましたが、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...  ?
}
4

1 に答える 1