[解決済み] 履歴に影響を与えずにハッシュナビゲーションを使用することはできますか?
2022-12-17 23:41:53
質問
もしかしたら 不可能 のハッシュ値を変更する方法はありますか? をブラウザの履歴に残すことなく変更する方法はありますか? と 再読み込みせずに ? または同等のことをする?
具体的な話としては、基本的なハッシュナビゲーションのようなものを開発していたのですが、それに沿って
//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) どのタブで 現在 を保持しないのは迷惑なことです。
どのように解決するのですか?
location.replace("#hash_value_here");
は、IOSのChromeでは動作しないことが判明するまで、私のためにうまく動作しました。その場合は、使用してください。
history.replaceState(undefined, undefined, "#hash_value")
history.replaceState() は history.pushState() と全く同じ動作をしますが、replaceState() は新しい履歴を作成するのではなく、現在の履歴を修正する点が異なります。
を維持することを忘れないでください。
#
を残しておかないと、URLの最後の部分が変更されてしまいます。
関連
-
[解決済み] 正規表現で変数を使うには?
-
[解決済み] Node.jsのmodule.exportsの目的と使い方を教えてください。
-
[解決済み] encodeURI / encodeURIComponentの代わりにescapeを使用するのはどのような場合ですか?
-
[解決済み] JavaScriptで、数値が精度を失うことなく到達できる最も高い整数値は何ですか?
-
[解決済み] JavaScriptでURLの#hashを確認する方法は?
-
[解決済み] JavaScriptでwindow.location(URL)からハッシュを削除する方法 ページを更新せずに?
-
[解決済み】JavaScriptで文字列をBase64にエンコードするにはどうすればいいですか?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] ECMAScriptとは?
-
[解決済み] javascriptでオプションのパラメータを扱う
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ