JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでページを再読み込みせずにURLからハッシュ（#）を削除する方法

history APIのreplaceStateメソッドを使えば、ページを更新せずにハッシュを削除できる

URLから#以降のハッシュ部分を取り除きたい場合、History APIのreplaceState()メソッドを使用することで、ページの再読み込みなしに実現できます。

replaceState()は、現在の履歴エントリを、引数として渡されたステートオブジェクト・タイトル・URLで置き換えるメソッドです。ユーザーの操作に応じて、現在の履歴エントリの状態やURLだけを更新したい場合に特に便利です。

ハッシュを削除するには、次のように記述します。

history.replaceState(null, null, ' ');

このコードを実行すると、アドレスバー上のURLからハッシュが取り除かれ、画面はそのままリロードされずに表示され続けます。なお、第3引数に渡す文字列は現在のパスと同一オリジンである必要があるため、実際にはwindow.location.pathnameなどを渡す方法も推奨されます。

history.replaceState(null, '', window.location.pathname + window.location.search);

このように書くことで、クエリ文字列を保持したままハッシュのみを確実に削除できます。

  1. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor

  2. JavaScriptのsplice()メソッドで配列から要素を削除する方法【コード例付き】

    JavaScriptのsplice()メソッドを使うと、配列から指定した位置の要素を簡単に削除できます。このメソッドは元の配列を直接変更する点が特徴です。 splice()メソッドの基本構文 arr.splice(start, deleteCount) start: 削除を開始するインデックス位置（0から始まります） deleteCount: 削除する要素の数。省略すると、開始位置から配列の末尾までがすべて削除されます 以下は、splice()メソッドを使用して配列の1番目から5番目の間の要素（インデックス1〜4）を削除するサンプルコードです。 コード例 <!DOCTYPE html