戻るボタンと進むボタンのページネーションを作るためには、以下のソースコードをHTMLの<body></body>内に埋め込んでみましょう。
ついでにページの更新をするときに表示されるリロードもプログラミングしてみましょう。
目次
【ページネーションまとめ】HTMLでプログラミングする戻るボタンと進むボタン
戻るボタン
<form><input type=”button” value=” 戻る ” onClick=”history.back()”></form>
進むボタン
<form><input type=”button” value=” 戻る ” onClick=”history.forward()”></form>
戻るボタンと進むボタンの応用（ページネーション）
<form><input type=”button” value=” 2頁戻る ” onClick=”history.go(-2)”></form>
<form><input type=”button” value=” 2頁進む ” onClick=”history.go(2)”></form>
リロードボタンのソースコード
リロードとは「更新」を意味しています。javascript1.1以降で使えるようになりました。
<form><input type=”button” value=” 更新中 ” onClick=”location.reload()”></form>
元のページへ戻れないようにするソースコード
元のページに戻れないサイトはなかなかないですが、特別な意図や目的がある場合に使います。
以下のソースコードでプログラミングする.replace()メソッドは、今表示しているサイトのURLから()内のURLのhttps://updowntech.comに置き換えます。
そのため、元のページのURLが履歴に残らなくなって、「戻る」ボタンを使っても元のページに戻れません。
javascript1.1以降にプログラミングできるようになりました。
<form><input type=”button” value=” 戻れません ” onClick=”window.location.replace(‘https://updowntech.com’)”></form>
まとめ
ページ送りやページネーション機能を実装できれば、1ページで終わらない、複数のページを載せたサイトを作ることができます。