location.replace()メソッドの「使い方」や「location.hrefとの違い」を解説！

この記事ではJavaScriptの『location.replace()メソッド』について、

• location.replace()メソッドとは
• location.replace()メソッドの構文
• location.replace()メソッドの使い方
• location.replace()とlocation.assign()とlocation.hrefの違い

などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

location.replace()メソッドとは

location.replace()メソッドは、現在のURLを新しいURLに置換するメソッドです。

location.replace()メソッドが呼び出されると、現在のURLが新しいURLで置換され、新しいURLのページに画面遷移します。その際、新しいURLはブラウザの閲覧履歴に追加されません。そのため、ブラウザの「戻る」ボタンを使用しても、前のページに戻ることができなくなります。

例えば、http://page-A.comからhttp://page-B.comに遷移し、その後location.replace()メソッドを使用してhttp://page-C.comに遷移した場合、ブラウザの「戻る」ボタンを押しても前のページ(http://page-B.com)には戻らず、http://page-A.comに戻ることになります。

location.replace()メソッドの構文を以下に示します。

location.replace(url);
// 以下に示すようにwindowオブジェクトを前につけてもOK
window.location.replace(url);

location.replace()メソッドの使い方

以下のURLのWebページを表示している状態にします。

https://www.google.co.jp

この状態において、location.replace()メソッドでURLで変更しましょう。以下のサンプルコードをGoogle Chromeのデベロッパーツールで実行してください。

// 指定したURLを置換して画面遷移させる
location.replace('https://it-infomation.com');

上記のサンプルコードを実行すると、https://www.google.co.jpからhttps://it-infomation.comにURLが置換され、https://it-infomation.comのページに画面遷移します。

location.replace()メソッドによって画面遷移した場合には、閲覧履歴にhttps://it-infomation.comが追加されないので、ブラウザの「戻る」ボタンを押しても、前のページ(https://www.google.co.jp)に戻ることができません。https://www.google.co.jpの直前に閲覧していたページに戻ります。

location.replace()とlocation.assign()とlocation.hrefの違い

location.replace()とlocation.assign()とlocation.hrefの違いを説明します。これらの違いは閲覧履歴に新しいURLを追加するか否かです。

location.replace()メソッドは新しいURLを閲覧履歴に追加しないので、ブラウザの「戻る」ボタンを押しても前のページに戻ることができなくなります。

一方、location.assign()メソッドとlocation.hrefプロパティは新しいURLを閲覧履歴に追加するので、ブラウザの「戻る」ボタンを押したら前のページに戻ります。

// 指定したURLに画面遷移(閲覧履歴に追加しない)
location.replace('https://it-infomation.com');

// 指定したURLに画面遷移(閲覧履歴に追加する)
location.assign('https://it-infomation.com'); // location.assign()を使用した場合
location.href = 'https://it-infomation.com'; // location.hrefを使用した場合

本記事のまとめ

この記事ではJavaScriptの『location.replace()メソッド』について、以下の内容を説明しました。

• location.replace()メソッドとは
• location.replace()メソッドの構文
• location.replace()メソッドの使い方
• location.replace()とlocation.assign()とlocation.hrefの違い

お読み頂きありがとうございました。