javascript 1つ次のページに進む

作成日 2022.10.25
javascript
javascript

javascriptで、1つ次のページに進むサンプルコードを記述してます。history.forward()メソッドを使用すると、ブラウザのセッション履歴の 1 つ次のページに移動することができます。実際に、実行した結果を動画で掲載しております。

1. 環境
2. 1つ次のページに進む
3. 1つ前に戻る
4. nページ進む・戻る
5. サンプルコード

環境

OS windows11 home
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

1つ次のページに進む

1つ次のページに進むには、「history.forward();」を使用します。
※進むページが存在しないは何も起こりません。

history.forward();

次のページに進むボタンを作成してみます。

<button id="btn">button</button>

<script>
    
document.getElementById("btn").addEventListener('click', function(){
    history.forward();
} )

</script>

実行結果をみると、次のページに進んでいることが確認できます。

1つ前に戻る

逆に1つ前に戻るには、「history.back();」を使用します。

history.back();

nページ進む・戻る

指定した値で「進む・戻る」を行う場合は「hisotry.go()」を使用します。

hisotry.go( 数値 );

// 2つ前に閲覧していたページに戻る場合
history.go( -2 );

// 2つ前に閲覧していたページに進む場合 
history.go( 2 );

// 1つ前に閲覧していたページに進むので「history.forward()」と同じ
history.go( 1 );

サンプルコード

以下は、実行ボタンをクリックすると、次のページに進むだけのサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-25" style="margin-top:200px">    

    <button id="btn" class="btn btn-outline-warning btn-rounded">進む</button>

  </div>

  <script>

    btn.addEventListener('click', () => {      

      history.forward();

    });

  </script>

</body>

</html>

ページが1つ進んでいることが確認できます。