【ページネーションまとめ】HTMLでプログラミングする戻るボタンと進むボタン

この記事は約3分で読めます。

戻るボタンと進むボタンのページネーションを作るためには、以下のソースコードを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ページで終わらない、複数のページを載せたサイトを作ることができます。

 

 

 

タイトルとURLをコピーしました