web-dev-qa-db-ja.com

HTML5 History APIを使用するための良いチュートリアル（Pushstate？）

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

リンクがJSをオンにしていない可能性があるため、送信される可能性を許可するための素晴らしい方法のように思えるので、これを使用したいと思います。多くのソリューションは、JSのある人がいない人にリンクを送信すると失敗します。

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

http://html5demos.com/history

javascripthtml5pushstatehtml5-history
168
Mild Fuzz

すばらしいチュートリアルを行うには、この機能に関する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

181
balupton

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

33
Kiran Aghor

ユーザーがディープリンクをコピーまたはブックマークして再度アクセスした場合、HTML5 pushstateを使用しているときに留意してください、それは直接サーバーヒットになり、404になります。君は。最も簡単な解決策は、次のように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;
27
Mauvis Ledford

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イベントをリッスンします。

5
Erik Ringsmuth

RailscastのRyan Batesによるトピックに関する素晴らしいスクリーンキャストです。最後に、history.pushStateメソッドが利用できない場合、彼は単にajax機能を無効にします。

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

4
deb

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

4
Oliver Nightingale

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

2
Nathan Totten

History.jsの上に StateRouter.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();

ここに少しあります fiddle 私はその使用法を示すために作りました。

2
aknuds1

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

1
sprugman