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


99

私はそれがあるかもしれない怖い不可能そこ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)タブ保持ではない、彼らはしている上、現在、彼らがヒットした場合リフレッシュがあります煩わしさ。


履歴を追跡したくないのに、なぜハッシュを変更したいのですか?:|
Ionuț Staicu 2010

9
更新時にはユーザーに表示されていたタブを提示するのが最適ですが、タブ間を行き来している可能性があるため、履歴がエントリで不必要に満杯になり、[戻る]ボタンの実用性が低下します。ただし、これは単なる例です。一時的な状態を保存する必要があるが、Cookieに依存したり、ユーザーの一時ファイルにそれらを入力したりしたくない場合はいつでも可能です。更新すると、jsのコンテンツはあなたが残したままです-ページを離れたことはなく、ジャンプポイントや疑似ページではないため、履歴エントリは標準のナビゲーションにのみ干渉します。

回答:


94

location.replace("#hash_value_here");IOS Chromeでは動作しないことが判明するまで、私にとってはうまくいきました。その場合は、以下を使用します。

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

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

を保持することを忘れないでください。そうしない#と、URLの最後の部分が変更されます。


3
最新のブラウザーに完全に進む方法。ただし、セッション履歴管理の部分的なサポートに注意してください。
マット

これの使い方について混乱しています。続けて使用window.location.hash = 'my-hash';history.replaceState(undefined, undefined, "#my-hash")ますか?
Bram Vanroy、2015年

2
@BramVanroyいいえ、後者を使用するだけで十分です。
ルシア、

2
:targetセレクター...を使用しない限り、仕様の一部(cssと履歴操作との相互作用)は現在定義されていないようで、ほとんど/すべてのブラウザーで履歴の置換時にスタイルが再計算されないため、履歴関数は役に立ちません。
モーフル2016

@Luxiyalu、どうhistory.replaceState違うのlocation.replace
Pacerier

99
location.replace("#hash_value_here"); 

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


4
これだよ。また、URIセグメントがある場合、location.replace(window.location + "#hash")はそれらを保持します。
テッダー2012年

7
この方法の二番目に、もっときれいに、それが正しい答えとしてマークされていればいいのに。
joeellis

14
window.location.replace(('' + window.location).split('#')[0] + '#' + hash);ハッシュを更新するだけ
johnstorm

1
Windows 8のChrome 30でテストしています。Chromeの履歴に移動し、テストURLで[このサイトの詳細]を選択すると、この方法で追加されたすべてのハッシュが表示されます。
Alex Vang 2013年

1
location.replace( '#hash_value_here')は、ハッシュフラグメントのみを変更し、パスは変更しないため、ページの読み込みはトリガーされないことに注意してください。ドキュメントにベースタグ<base href ="http://example.com/" /> が含まれている場合を除きます。ベースタグ が含まれている場合、その後、先頭のみを指定してreplaceメソッドを使用すると、"#hash_value_here"実際には、 `location.replace( ' example.com/#hash_value_here')と言ったかのようになります。これは、ここで読むと明らかなように見えますが、パスフラグメントのあるページで、ベースが設定されていることに気付いていない場合は問題になります。
タイラーカステン2017年

6

編集:それは2年になった今、ブラウザーが進化しました。

@Luxiyaluの答えは行く方法です

- 以前の回答 -

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

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

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

これがお役に立てば幸いです。多分あなたの問題へのより簡単な解決策があります。

更新: これはどうですか:

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

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


基本的に私が見逃している何かがある可能性は非常に高いです(枯渇はいい言い訳です、それで行きます)が、リロード時に変更された値を保持する変数を設定できると言っていますか?クッキー付き?(どうやらクッキーはやり過ぎに見えるようです。)多分それは明確ではなかったものです。特にリロード時に、ハッシュ値を使用します。ご返信いただきありがとうございます。

私の説明を明確にするために:ユーザーがリロードを押した場合。それがハッシュの目的です。私はまだ通常の使用(タブの変更/クリック)でリロードを回避しようとしています。

では、リロード後にinfoの値をいくつか使用します。残念ながら、ハッシュ値はブラウザの履歴によって選択されます。申し訳ありませんが、私の経験から、クッキーはあなたの最善の策です。ブラウザーの履歴で検出されないものを再読み込み後に保持したい場合は、残念ながらCookieを使用します。ユーザーがリンクをクリックしている場合は、リンクをクエリ(?mystate=greatness)に設定できます。これは、ajaxである必要はありませんが、リクエストを初期化するときに読み取るJavaScriptの情報を保存できます。
guzart 2010

はい、ハッシュはリロードのヒット後にユーザーの情報を保存するためのものですが、問題は、一部のブラウザーが履歴にそれらの変更を保存することです。これは、それらが機能する方法です... :(
guzart

うん、あなたが正しいと思います。まぁ。(何か他の方法で何かが間違っていると証明されるのが大好きです。)

-1

いつでもイベントリスナーを作成して、ハイパーリンクのクリックイベントをキャッチし、コールバック関数にe.preventDefault()を配置できます。これにより、ブラウザーが履歴に挿入できなくなります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.