JavaScript ページを遷移するサンプル(location/history)

JavaScriptのページを遷移するサンプルです。
locationとhistoryについてです。

目次

location.href 

location.href = URL;
  • location.hrefにURLを指定すると、指定したURLに移動します。
  • 遷移先のブラウザの戻るボタンを押して遷移元に戻ることができます。
  • Locationはインターフェースで、hrefはプロパティです。
  • 以下はMDNのlocationのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Location

コード

location.hrefのサンプルです。

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

<script>
function clickBtn1(){

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

}
</script>

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

 

location.replace

location.replace(URL);
  • location.replaceの引数にURLを指定すると、指定したURLに移動します。
  • 遷移先のブラウザの戻るボタンは、使用不可になり遷移元に戻れません。
  • Locationはインターフェースで、replaceはメソッドです。
  • 以下はMDNのlocation.replaceメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Location/replace

コード

location.replaceのサンプルです。

<input type="button" value="ボタン2" onclick="clickBtn2()"/>

<script>
function clickBtn2(){

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

}
</script>

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

 

hisotry.back

hisotry.back()
  • hisotry.backは、表示していた前のページに移動します。
  • ブラウザの戻るボタンを押したときと同じ動きです。
  • history.go(-1) と同じ意味です。
  • historyはインターフェースで、backはメソッドです。
  • 以下はMDNのhisotryのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/History

コード

hisotry.backのサンプルです。

<input type="button" value="ボタン3" onclick="clickBtn3()"/>

<script>
function clickBtn3(){

	history.back();

}
</script>

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

 

hisotry.forward

hisotry.forward()
  • hisotry.forwardは、表示していた次のページに移動します。
  • ブラウザの次へボタンを押したときと同じ動きです。
  • history.go(1) と同じ意味です。
  • historyはインターフェースで、forwardはメソッドです。
  • 以下はMDNのhisotryのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/History

コード

hisotry.forwardのサンプルです。

<input type="button" value="ボタン4" onclick="clickBtn4()"/>

<script>
function clickBtn4(){

	history.forward();

}
</script>

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

関連の記事

JavaScript ウィンドウ/ダイアログを開くサンプル(windowオブジェクト)
JavaScript 一定間隔で処理を繰り返す(setInterval)
JavaScript 指定した時間の経過後1度処理を実行する(setTimeout)

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る