0

非常によく似たページがいくつかある小さなウェブサイトを書いています。ほとんどの場合、1 つの div のコンテンツのみが異なります。ナビゲーション、ヘッダーなどは同じままです。

したがって、「ベース」html ファイル、content-div のみを含むいくつかの小さな html ファイル、および次のような JavaScript コード (ボタンクリックイベントによってトリガーされる) でこれを実現しました。

$.get("content/text1.html", function(data) {
    $("#content").html(data);
});

これは非常にスムーズに機能しますが、問題は、アドレスバーの URL がそのような要求で変更されないことです。そのため、ユーザーが特定のページにリンクすることはできません。#-urls で可能であることは知っていますが、次のような URL が必要です。

example.com/talks/foo/bar

そして、いくつかの回避策ではありません。

別のスレッドで、誰かが html5 ブラウザー履歴 API (特にhistory.js )のヒントを教えてくれました。

私がそれで達成しようとしていること：

  1. 誰かがボタンをクリックすると -> ajax リクエストがトリガーされ、content-div のコンテンツが更新されます -> URL が次のように更新されますexample.com/talks/foo/bar
  2. 誰かがexample.com/talks/foo/barブラウザで直接リクエストした場合は、(1) と同じ ajax リクエストとコンテンツ更新を実行する必要があります。

私は最初のものを実現しようとしました：

$.get("content/text1.html", function(data) {
    $("#content").html(data);
    History.pushState(null, null, "content/text1.html"); 
});

しかし、どうすれば2番目のポイントを達成することができますか? rewriterule を使用すると、すべてを base-html ファイルとその中の js ロジックにリダイレクトして、URL をデコードし、ajax リクエストをトリガーしますか?

私は少し間違った道を進んでいるような気がします..

  • これが history.js の使用方法ですか?

  • 2 番目の箇条書きを達成するにはどうすればよいですか?

4

1 に答える 1

0

html5 ブラウザーで初期状態を取得するために ajax 呼び出しは必要ありません。あなたが言ったように、ハッシュではなくURL自体が変更されるため、サーバーは正しいコンテンツが既にロードされているURLに応答する必要があります。

すべての ajax 呼び出しと DOM 操作は、statechangeイベント ハンドラー内で行う必要があります。

したがって、ユーザーがリンクをクリックすると、イベント ハンドラーpushStateで DOM の変更を呼び出してハンドラーするだけです。が呼び出されたときにトリガーされるstatechangeため、これは機能します。statechangepushState

于 2012-10-10T13:55:54.920 に答える