Javascriptのブラウザ操作、リロードボタンとページをひとつ戻る/進むボタン
1. リロードボタン
<input type="button" id="reload" value="リロード" />
//リロード
const reloadBtn = document.querySelector("#reload")
reloadBtn.addEventListener("click", function () {
window.location.reload()
})
location.reload()
- 現在の URL をリロード(再読み込み)する。
location.reload(true);
のように引数に true を指定するとサーバーからページを再読み込みする(ブラウザキャッシュを無視する)
history.go()
または、history.go(0)
でも再読み込みが可能。
2. ページをひとつ戻るボタン
<input type="button" id="back" value="戻る" />
//ページをひとつ戻る
const backBtn = document.querySelector("#back")
backBtn.addEventListener("click", function () {
window.history.back()
})
history.back()
- ブラウザ履歴のひとつ前のページに戻る。履歴がない場合は何もしない。history.go(-1)
でもひとつ前のページに戻るが可能。
3. ページをひとつ進むボタン
<input type="button" id="forward" value="進む" />
//ページをひとつ進む
const forwardBtn = document.querySelector("#forward")
forwardBtn.addEventListener("click", function () {
window.history.forward()
})
history.forward()
- ブラウザ履歴のひとつ次のページに進む。履歴がない場合は何もしない。
history.go(1)
でもひとつ次のページに進むが可能。