【JavaScript】ページ遷移とリロードをするコード
記事更新日：2022-04-23
違うページへ遷移したり、前のページに戻ったり、リロードしたり。
window.location：遷移する
const url = (行きたいページのurl);
const goToLocationUrl = (url) => {
window.location.href = url;
}- window.location
- 現在の位置についての情報を持っている
- 省略して、「location = url」でもOK
https://developer.mozilla.org/ja/docs/Web/API/Window/location
referrer：前のページへ戻る＆キャッシュも消す
const goBackWithRefresh = () => {
if ('referrer' in document) {
window.location = document.referrer;
} else {
window.history.back();
}
}- referrer
- どこのページから、このページに来たか（リンク元URL）を返す
- ブックマークから移動してきた場合は空文字列になる
https://developer.mozilla.org/ja/docs/Web/API/Document/referrer
↓
リファラが空になってる場合があるので、elseで history.back を指定しておく
- history.back
- 1 つ前のページに戻る
- ただし、キャッシュが残った状態で戻る
histrory.backだとキャッシュは残るんだね。
window.location.reload：現在のページをリロードする
const pageReloadNoCache = () => {
window.location.reload();
}location.reload- 現在の URL を再読み込みする
- ただし、キャッシュは消せない
- reload(true)とすればキャッシュが消せるという話も出回っているが、実際は違うらしい。（公式ページに記載あり）
https://developer.mozilla.org/ja/docs/Web/API/Location/reload
とりあえず、location がキーワード。
2022-04-23
編集後記：
この記事の内容がベストではないかもしれません。