18

jQuery BBQ プラグインを使用して、ユーザーのページの進行状況を追跡しています。ただし、ハッシュの変更ごとに 1 つではなく、ユーザーの履歴に 1 つの追加エントリを作成したいだけです。

jQuery.bbq.pushStateおよびメソッドを試しましたが、merge_mode成功しませんでした: 新しい履歴エントリがまだ追加されています:

jQuery.bbq.pushState({ sort: encodeURIComponent(sort) });

も試しlocation.replace()ましたが、Safari 5.1.2 では機能しません。

location.replace('#' + encodeURIComponent(sort))

履歴に多くのエントリを追加せずにハッシュを変更するためのクロスブラウザ ソリューションは何ですか?

4

2 に答える 2

38

replaceHash最初に、 1 つの引数のみを受け入れるfunction の定義を示します。新しいロケーション ハッシュです。ロジックの詳細な説明は、回答の下部にあります。

コード：

// Should be executed BEFORE any hash change has occurred.
(function(namespace) { // Closure to protect local variable "var hash"
    if ('replaceState' in history) { // Yay, supported!
        namespace.replaceHash = function(newhash) {
            if ((''+newhash).charAt(0) !== '#') newhash = '#' + newhash;
            history.replaceState('', '', newhash);
        }
    } else {
        var hash = location.hash;
        namespace.replaceHash = function(newhash) {
            if (location.hash !== hash) history.back();
            location.hash = newhash;
        };
    }
})(window);
// This function can be namespaced. In this example, we define it on window:
window.replaceHash('Newhashvariable');

関数ロジック

  • がサポートされている場合history.replaceState、関数は副作用なしで常に現在のハッシュを置き換えます。

  • hashそれ以外の場合は、最初のプロパティへの参照 ( )location.hashが作成され、次の関数が定義されます。

    1. の場合location.hash != hash、履歴の状態が少なくとも最初のページ ビューを過ぎていることが確実にわかります。ページをアンロードせずに、安全に履歴をさかのぼることができます。history.back(); // Go back in the history.
    2. 次に、location.hashプロパティを設定します。前のステップで履歴をさかのぼると、履歴エントリが上書きされます。


    フォールバック (最後) メソッドは、常に履歴を置き換えるとは限りません:の
    場合location.hash == hash、次のいずれかに該当します:

    1. ハッシュはまだ変更されていないため、前のページに戻っても意味がありません。
    2. ユーザーが元のページの状態に戻った可能性があります。を使用するhistory.back();と、ページがアンロードされる可能性があり、これは望ましくありません。


    したがって、安全のために、ハッシュが保存された元のハッシュと等しい場合、ページをアンロードすることはありません。

    注: ハッシュを変更する前に、このコードを実行することが重要です。ハッシュがすでに変更されている場合、スクリプトは信頼できなくなります。ユーザーは最初のハッシュ状態に移動した可能性がありますが、これは保存された とは異なりhashます。その結果、history.back()ページをアンロードします。

于 2012-02-14T18:43:56.570 に答える
23

2 番目の - 引数なしで- メソッドreplacefromを使用できます。これは、oldIE を含め、既知のすべてのブラウザで機能します。window.locationnewSubStr

function replaceHash(hash) {
  return window.location.replace(
    '#' + hash.replace(/^#/, '')
  );
}

ドキュメントに有効な要素 (仕様に従って) がある場合、ページはそれにジャンプ/スクロールすることに注意してください。

于 2013-06-24T06:15:05.843 に答える