https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/refer-to-users-transition-history-with-javascript-and-go-to-previous-next-page/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/refer-to-users-transition-history-with-javascript-and-go-to-previous-next-page/

JavaScriptでユーザーの遷移履歴を参照して前後ページへ遷移させるhistory.back()・history.forward()メソッドの使い方

前後のページへの遷移をさせたい

JavaScriptでユーザーの遷移履歴を参照して 前後のページへ遷移させるにはhistory.back()・history.forward()が便利です。

メソッド

メソッド意味
history.back()履歴を1つ戻る
history.forward()履歴を1つ進む
history.go(数値)履歴を「数値」分進む。負の値も可能
履歴遷移のメソッド

サンプルコード

サンプルコードとして、前後のページに遷移するボタンを作成しました。

Output
Pug
	.d-flex
		button#button.mb-4.text-center.mr-2 前ページへ
		button#button1.mb-4.text-center 次ページへ
SCSS
#button,
#button1 {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);
document.getElementById('button1').addEventListener('click', onClickAction1);
/** ボタンをクリックと関数を実行 */
function onClickAction() {
	//コンファームを表示
	const checkConfirm = confirm('前のページ(履歴)に遷移します。よろしいですか?'); 
	if ( checkConfirm ) {
		history.back();
	}
}

function onClickAction1() {
	//コンファームを表示
	const checkConfirm = confirm('次のページ(履歴)に遷移します。よろしいですか?'); 
	if ( checkConfirm ) {
		history.forward();
	}
}
インストラクター
コメント

コメントを残す