HTML5 History API（Pushstate？）を使用するための優れたチュートリアル[終了]

HTML5履歴APIを使用して、AJAXでロードされたコンテンツのディープリンクの問題を解決することを検討していますが、地面を離れるのに苦労しています。良いリソースを知っている人はいますか？

これは、リンクがJSをオンにしていない可能性があるリンクが送信される可能性を許容するための優れた方法と思われるため、使用したいと思います。JSを持つ誰かがリンクを持たない誰かにリンクを送信すると、多くの解決策が失敗します。

私の最初の調査では、JS内のHistory APIとpushStateメソッドを指摘しているようです。

http://html5demos.com/history

優れたチュートリアルについては、この機能に関するMozilla Developer Networkページが必要です：https : //developer.mozilla.org/en/DOM/Manipulating_the_browser_history

残念ながら、HTML5 History APIはすべてのHTML5ブラウザーで異なる方法で実装され（一貫性がなくバグが多い）、HTML4ブラウザーのフォールバックはありません。さいわい、History.jsはHTML5ブラウザーの相互互換性を提供し（すべてのHTML5ブラウザーが期待どおりに機能することを保証）、オプションでHTML4ブラウザーのハッシュフォールバックを提供します（データ、タイトル、pushState、replaceState機能のサポートの維持を含む）。

History.jsの詳細については、https： //github.com/browserstate/history.jsをご覧ください。

Hashbangs VS Hashes VS HTML5 History APIに関する記事については、https： //github.com/browserstate/history.js/wiki/Intelligent-State-Handlingをご覧ください。

「Dive into HTML 5」から多くの恩恵を受けました。説明とデモはより簡単で要点があります。履歴の章-http://diveintohtml5.info/history.html および履歴のデモ-http://diveintohtml5.info/examples/history/fer.html

ユーザーがディープリンクをコピーまたはブックマークして再度アクセスした場合、HTML5 pushstateを使用している間は、404になる直接のサーバーヒットになるので、準備をする必要があり、pushstate jsライブラリでも役に立たないことに注意してください。君は。最も簡単な解決策は、次のようにNginxまたはApacheサーバーに書き換えルールを追加することです。

Apache（使用している場合はvhost内）：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;

HTML5履歴スペックは風変わりです。

history.pushState()popstateイベントを送出したり、それ自体で新しいページをロードしたりしません。国家を歴史に押し込むことだけが意図されていた。これは、単一ページアプリケーションの「元に戻す」機能です。popstateイベントを手動でディスパッチするか、を使用history.go()して新しい状態に移動する必要があります。アイデアは、ルーターがpopstateイベントをリッスンしてナビゲーションを実行できるというものです。

注意すべき点：

• history.pushState()イベントをhistory.replaceState()ディスパッチしないでくださいpopstate。
• history.back()、history.forward()、ブラウザの[戻る]ボタンや[進む]ボタンとは、派遣行うpopstateイベントを。
• history.go()そして、history.go(0)フルページのリロードを行うと、送出されませんpopstateイベントを。
• history.go(-1)（1ページ戻る）およびhistory.go(1)（1ページ進む）ディスパッチpopstateイベントを実行します。

このような履歴APIを使用して、新しい状態をプッシュし、popstateイベントを送出できます。

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

次にpopstate、ルーターでイベントをリッスンします。

Davis.jsを試すことができます。これにより、利用可能な場合はpushStateを使用してJavaScriptでルーティングでき、JavaScriptがない場合はサーバー側のコードでリクエストを処理できます。

ここに、RailscastsのRyan Batesによるトピックに関するすばらしいスクリーンキャストがあります。最後に、history.pushStateメソッドが使用できない場合は、ajax機能を無効にします。

http://railscasts.com/episodes/246-ajax-history-state

このjQueryプラグインをご覧ください。彼らのサイトにはたくさんの例があります。http://www.asual.com/jquery/address/

StateRouter.jsと呼ばれる、History.jsの上に非常にシンプルなルーター抽象化を記述しました。開発の非常に初期の段階ですが、私が書いている単一ページアプリケーションのルーティングソリューションとして使用しています。あなたと同じように、History.jsは理解するのが非常に難しいことに気づきました。特にJavaScriptにかなり慣れていないため、低レベルの問題を解決するために、ルーティングの抽象化が本当に必要（または必要）であると理解できるまで、問題。

次の簡単なコード例は、それがどのように使用されるかを示しています。

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

これは、その使用法を示すために私が作り出した小さなフィドルです。

jQueryが利用可能な場合は、jQuery BBQを使用できます