this、this、thisなど、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... ?
}