167

HTML5 履歴 API を使用して、AJAX で読み込まれたコンテンツのディープ リンクの問題を解決することを検討していますが、うまくいくのに苦労しています。良いリソースを知っている人はいますか?

リンクが送信された場合に JS がオンになっていない可能性を許容するための優れた方法と思われるため、これを使用したいと考えています。JS を持つ人がそうでない人にリンクを送信すると、多くのソリューションが失敗します。

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

http://html5demos.com/history

4

9 に答える 9

181

優れたチュートリアルには、この機能に関する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を参照してください。

于 2011-01-30T13:47:56.270 に答える
33

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

于 2011-09-29T05:42:48.383 に答える
29

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

Apache (仮想ホストを使用している場合は仮想ホスト内):

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

ニンクス

rewrite ^(.+)$ /index.html last;
于 2012-05-18T06:04:47.830 に答える
4

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

于 2011-02-04T20:25:10.787 に答える
4

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

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

于 2012-01-03T16:50:14.963 に答える
3

I've written a very simple router abstraction on top of History.js, called StateRouter.js. It's in very early stages of development, but I am using it as the routing solution in a single-page application I'm writing. Like you, I found History.js very hard to grasp, especially as I'm quite new to JavaScript, until I understood that you really need (or should have) a routing abstraction on top of it, as it solves a low-level problem.

This simple example code should demonstrate how it's used:

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();

Here's a little fiddle I've concocted in order to demonstrate its usage.

于 2013-01-02T20:10:20.377 に答える
2

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

于 2010-10-25T14:38:20.447 に答える
1

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

于 2010-10-25T14:40:57.093 に答える