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

01. location

02. hisotry

location.href = URL;

<input type="button" value="button1" onclick="clickBtn1()"/>

<script>
function clickBtn1(){
	location.href = "http://www.example.com";
}
</script>

指定したURLに遷移します。

location.replace(URL);

<input type="button" value="button2" onclick="clickBtn2()"/>

<script>
function clickBtn2(){
	location.replace("http://www.example.com");
}
</script>

指定したURLに遷移します。遷移先のブラウザの戻るbuttonは使用不可になります。

<input type="button" value="button1" onclick="clickBtn1()" />

<script>
  function clickBtn1() {
    location.reload();
  }
</script>

現ページをリロードします。

hisotry.back()

移動元ページ test1.html

<p>テストページ</p>
<a href="test2.html">test2へ移動</a>

移動先ページ test2.html

<input type="button" value="button3" onclick="clickBtn3()"/>

<script>
function clickBtn3(){
	history.back();
}
</script>

ボタンをクリックすると前のページ(test1.html)に移動します。

aタグのリンクで戻る場合

<a href="" onclick="window.history.back(); return false;">戻る</a>

inputタグ内のonclickで戻る場合

<input type="button" onclick="window:history.back();" value="戻る" />

hisotry.forward()

<input type="button" value="button4" onclick="clickBtn4()"/>

<script>
function clickBtn4(){
	history.forward();
}
</script>

次のページに移動します。