web-dev-qa-db-ja.com

履歴に影響を与えずにハッシュナビゲーションを使用できますか？

不可能 かもしれませんが、ブラウザの履歴にエントリを残さずにURLのハッシュ値を変更する方法はありますかおよびリロードせずに？または同等のものを行いますか？

具体的には、次のような基本的なハッシュナビゲーションを開発していました。

//hash nav -- works with js-tabs
var getHash = window.location.hash;
var hashPref = "tab-";
function useHash(newHash) {
    //set js-tab according to hash
    newHash = newHash.replace('#'+hashPref, '');
    $("#tabs li a[href='"+ newHash +"']").click();
}
function setHash(newHash) {
    //set hash according to js-tab
    window.location.hash = hashPref + newHash;

    //THIS IS WHERE I would like to REPLACE the location.hash
    //without a history entry

}
    // ... a lot of irrelavent tabs js and then....

    //make tabs work
    $("#tabs.js-tabs a").live("click", function() {
        var showMe = $(this).attr("href");
        $(showMe).show();
        setHash(showMe);
        return false;
    });
    //hash nav on ready .. if hash exists, execute
    if ( getHash ){
        useHash(getHash);
    }

もちろん、jQueryを使用します。 この特定のインスタンスで 1）不要な参照を積み上げることで、ユーザーにタブの変更をすべて戻るようにさせると、効果的に「戻るボタンを壊す」ことができ、2）どのタブを保持しない現在オン更新がヒットした場合は迷惑です。

javascriptjquerybrowser-historyfragment-identifierbrowser-state
94
D_N

location.replace("#hash_value_here");は、IOS Chromeで動作しないことが判明するまで問題なく動作しました。

history.replaceState(undefined, undefined, "#hash_value")

history.replaceState（） は、replaceState（）が新しい履歴エントリを作成する代わりに現在の履歴エントリを変更することを除き、history.pushState（）とまったく同じように動作します。

#またはURLの最後の部分が変更されます。

84
Lucia
location.replace("#hash_value_here");

上記はあなたが望んでいることをするようです。

94
Matt

編集：数年が経ち、ブラウザは進化しました。

@Luxiyaluの answer が道です

-古い回答-

私もそれは不可能だと思います（現時点では）。しかし、ハッシュ値を使用しないのに、なぜハッシュ値を変更する必要があるのですか？

プログラマーとしてハッシュ値を使用する主な理由は、ユーザーがページをブックマークできるようにすること、またはブラウザーの履歴に状態を保存することだと思います。このいずれも実行したくない場合は、状態を変数に保存して、そこから作業するだけです。

ハッシュを使用する理由は、制御できない値を操作するためだと思います。必要ない場合は、おそらくすべてを制御下に置いていることを意味しているので、変数に状態を保存して操作するだけです。 （私は自分自身を繰り返すのが好きです）

これがお役に立てば幸いです。たぶんあなたの問題に対するより簡単な解決策があるでしょう。

UPDATE：これはどうですか：

  1. 最初のハッシュを設定し、ブラウザの履歴に保存されることを確認してください。
  2. 新しいタブが選択されたら、window.history.back(1)を実行します。これにより、最初の初期化ハッシュから履歴が戻ります。
  3. これで、新しいハッシュを設定したので、タブ移動は履歴に1つのエントリのみを作成します。

おそらく、いくつかのフラグを使用して、戻って現在のエントリを「削除」できるかどうか、または最初のステップをスキップするかどうかを知る必要があります。そして、history.backを強制するときに、「ハッシュ」のロード方法が実行されないことを確認してください。

6
guzart