0

私は html5 とhistory.jsが初めてで、まだ history.js の概念を理解しようとしています。ここで2つの質問。

  1. history.js は、ページを更新せずにアドレス バーの URL を変更するために使用されるだけですか? (ハッシュを使用して URL を操作するなど)

  2. history.js を使用して簡単なコードを作成しました (ここに私のフィドルがあります)

ページ 1 の URL はhttp://mysite.com?id=1,2,3です。

以下のボタンのいずれかが押されると、JS コードはボタンを非表示にし、URL から ID を削除し、history.js を使用してアドレス バーの URL を変更します。

<input type="button" value="delete id 1" data-remove-id="1" class="remove" />

<input type="button" value="delete id 2" data-remove-id="2" class="remove" />

<input type="button" value="delete id 3" data-remove-id="3" class="remove" />

問題は、戻るボタンを押すと URL が正しく変更されることですが、非表示のボタンを再表示するにはどうすればよいですか? またはどのようにページを更新しますか? それともajaxを使用しますか？ベストプラクティスは何ですか？

4

1 に答える 1

0

  1. はい、現在の状態情報を保存し (必要に応じて)、現在の URL を履歴にプッシュし、新しい URL を URL バーに読み込むことができます。ページをリロードしません。URL の変更に対応するクライアントで、javascript (AJAX 呼び出しまたは実行中のその他のコード) を使用して何かを行っていることを前提としています。

  2. ブラウザーの戻るボタンと history.js は、行った JavaScript コードを元に戻すことはありません。AJAX を使用して、その前の URL のページをリロードする必要があります。これにより、非表示のボタンが読み込まれます。少しニュアンスがあります - 戻るボタンを押してもボタンは表示されず、別の AJAX 呼び出しから取得した元のコードからボタンが再作成されます。

アップデート：

ハンドラーを window.onpopstate イベントにバインドできます。

window.onpopstate = function(event) {
  // your code...
}
于 2013-10-07T07:17:54.320 に答える