0

10 個のボタンとコンテナー (シンプル) を備えた小さな CoffeeScript アプリケーションを作成しています。ユーザーがいずれかのボタンを押すと、コンテナーが変更されます。

ボタンはナビゲーションバーのように見え、リンクを使用する (ページ全体をリロードする) 代わりに、javascript (Coffeescript、jquery など) を使用してページのコンテンツを変更しました (データをロードするための Ajax クエリを使用)。

問題は、ブラウザの戻るボタンと進むボタンがその解決策で機能しないことです...そして私はその解決策を見つける必要があります. 多分ルーティング？

Asana.com がこの問題を解決した方法がとても気に入っています。実際にはアドレスは変更されましたが、コンテンツは完全には再読み込みされていないようです。

何を指示してるんですか ？助けてくれてありがとう

4

1 に答える 1

2

ハッシュ。最も簡単な解決策は、ユーザーがボタンをクリックするたびに URL ハッシュを定義することです。例えば：

location.href = "#" + button.id;

これにより、履歴エントリが作成され、ユーザーはブラウザで前後に押すことができます。

しかし、これがいつ発生するかをどのように確認できますか？イベントがありhashchangeます：

window.onhashchange = function() {
    var state = location.hash.substring(1); // chomps the initial #
    ...
};

変数に基づいてコードを作成するstateと、そこから AJAX 呼び出しをトリガーできます。

ところで、ハッシュをhrefプロパティとして持つボタンの代わりにリンクを使用して、コードを完全に変更できます。この場合、ページはリロードされませんが、履歴エントリが作成され、hashchangeイベントが発生します。

このhashchangeイベントは、最新のすべてのブラウザー (履歴を制御するためのより柔軟で強力な方法もサポートしていhistory.pushStateます) と IE8-9 でサポートされています。

于 2013-07-31T08:54:17.870 に答える