15

HTML5 History API を使用して単一ページの JavaScript アプリケーションを作成しています。アプリケーションは Ajax を介してコンテンツをロードし、スクリーン スタックを使用してフォアグラウンド スクリーンの状態情報を内部的に維持します。

戻るボタンでナビゲーションを有効にしたいのですが、進むボタンを有効にしたくありません。

いくつかの簡単な情報:

  • ユーザーは戻ることしかできず、進むことはできません
  • ブラウザの戻るボタンを押すと、ユーザーが表示している現在のページ画面が閉じられ、前のページがリロードされます
  • プロジェクトは最新バージョンの Chrome のみを対象としているため、他のブラウザーの実装は重要ではありません
  • ネイティブの JavaScript と jQuery のみを使用しています。History.js を使用せずにこれを実行したいと考えています。

新しい画面をロードすると、次の行を実行します。

history.pushState(screenData, window.document.title, "#");

jQuery 経由で popstate イベントにバインドします。

$(window).bind("popstate", function(event) {
    if (event.originalEvent.state != null) {
        // Logic that loads the previous screen using my screen stack
    }
});

アプリケーションの履歴管理は機能していますが、戻ると [進む] ボタンが有効になっています。イベントからデータhistoryを削除する方法を理解する必要があります。popstate

これをreplaceStateで行うことはできますか? これを行う方法がわかりません...

4

4 に答える 4

11

悪い部分

進むボタンを実際に無効にするには、ブラウザの履歴を削除できる必要があります。これは、サイトが履歴全体を削除できるため、すべてのJavaScript実装で許可されているわけではなく、ユーザーの利益にはなりません。

良い部分

これは少し注意が必要ですが、カスタム履歴を作成したい場合はうまくいくと思います。イベントで使用pushStateしてpopstate、実際のページを最上位の履歴エントリにすることができます。私はあなたがあなたの歴史を扱う方法を仮定します、あなたのウィンドウは決してアンロードされません。これにより、ユーザー履歴を自分で追跡できます。

var customHistory = [];

history.pushState(screenData, window.document.title, "#");以前と同じように、読み込んだすべてのページをプッシュします。カスタム履歴に状態を追加するのはあなただけです。

history.pushState(screenData, window.document.title, "#");
customHistory.push({data: screenData, title: window.document.title, location: '#'});

これで、popstateイベントがある場合は、カスタム履歴をポップして、一番上のエントリにプッシュするだけです。

window.onpopstate = function(e) { 
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
}

またはjQueryで

$(window).on('popstate', function(e) {
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
});
于 2012-07-18T20:43:35.270 に答える