JavaScript ページを遷移する(location/history)

JavaScriptのページを遷移するサンプルです。

目次 指定したURLに移動(location href)
指定したURLに移動+戻るボタン不可(location.replace)
現在ページをリロードする(location.reload)
前のページに移動(hisotry.back)
次のページに移動(hisotry.forward)

指定したURLに移動

location.href = URL;
  • location.hrefにURLを指定すると、指定したURLに移動します。
  • 遷移先のブラウザの戻るボタンを押して遷移元に戻ることができます。
<input type="button" value="ボタン1" onclick="clickBtn1()"/>

<script>
function clickBtn1(){

	location.href = "http://www.example.com";

}
</script>

6行目は、指定したURLに遷移します。

指定したURLに移動+戻るボタン不可

location.replace(URL);
  • location.replaceの引数にURLを指定すると、指定したURLに移動します。
  • 遷移先のブラウザの戻るボタンは、使用不可になり遷移元に戻れません。
<input type="button" value="ボタン2" onclick="clickBtn2()"/>

<script>
function clickBtn2(){

	location.replace("http://www.example.com");

}
</script>

6行目は、指定したURLに遷移します。遷移先のブラウザの戻るボタンは使用不可になります。

現在ページをリロードする

<input type="button" value="ボタン1" onclick="clickBtn1()" />

<script>
  function clickBtn1() {

    location.reload();
    
  }
</script>

6行目は、現在ページをリロードします。

以下はMDNのlocationのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Location

前のページに移動

hisotry.back()
  • hisotry.backは、表示していた前のページに移動します。
  • ブラウザの戻るボタンを押したときと同じ動きです。
  • history.go(-1) と同じ意味です。
  • history.go(0)またはhistory()は現在のページを再読み込みします。
<input type="button" value="ボタン3" onclick="clickBtn3()"/>

<script>
function clickBtn3(){

	history.back();

}
</script>

6行目は、前のページに移動します。

次のページに移動

hisotry.forward()
  • hisotry.forwardは、表示していた次のページに移動します。
  • ブラウザの次へボタンを押したときと同じ動きです。
  • history.go(1) と同じ意味です。
<input type="button" value="ボタン4" onclick="clickBtn4()"/>

<script>
function clickBtn4(){

	history.forward();

}
</script>

6行目は、次のページに移動します。

以下はMDNのhisotryのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/History

関連の記事

JavaScript ウィンドウ/ダイアログを開くサンプル
JavaScript setInterval 一定間隔で処理を繰り返す
JavaScript setTimeout 一定時間の経過後に処理を行う

△上に戻る