JavaScript を使用して Web ページに戻るボタンを作成する
- HTML の[戻る]ボタン
- JavaScript を使用して HTML で戻るボタンを作成する
-
JavaScript で戻るボタンを作成するために
history.back()メソッドを使用する -
JavaScript で
history.go()メソッドを使用して戻るボタンを作成する
この JavaScript の記事では、JavaScript を使用して戻るボタンを作成する方法と、HTML で戻るボタンの必要性と使用法について学習します。JavaScript の組み込みメソッドを使用して前のページを取得する方法を説明します。
HTML の[戻る]ボタン
私たちが使用しているブラウザにはすでに戻るボタンがあります。そのため、ページに戻るボタンを配置する必要がある理由は十分にあるはずです。HTML または JavaScript コードを使用して、Web ページに戻るボタンを追加できます。
Web ページにはボタンまたはリンクがあり、それをクリックすると、ブラウザーは前のページに戻ります。これは、クライアント側で HTML コードと小さな JavaScript を使用して実行できます。
JavaScript を使用して HTML で戻るボタンを作成する
HTML の戻るボタンを作成するためのコードは、ページ内のどこにでも配置できます。作成した戻るボタンは、ブラウザのツールバーの戻るボタンと同じように機能します。
ユーザーに閲覧履歴がない場合、この戻るボタンは機能しないことに注意してください。ユーザーが Web ページを開いて、戻るボタンをクリックしても何も起こりません。
JavaScript で戻るボタンを作成するために history.back() メソッドを使用する
Web ブラウザには history という JavaScript オブジェクトが組み込まれています。このオブジェクトには、ユーザーが現在のブラウザウィンドウでアクセスしたすべての URL が含まれています。この history.back() メソッドを使用して、ユーザーの前のページに戻るように Web ブラウザーに指示できます。この組み込みの JavaScript オブジェクトを使用するには、ボタンの onclick イベント属性に追加します。次のコードに示すように、ボタンタイプの <input> 要素を含む <form> 要素を使用してボタンを作成します。
コード-HTML：
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
</body>
</html>
出力：
-method.webp)
ユーザーがボタンをクリックすると、ユーザーはブラウザーの前のページに戻ります。
JavaScript で history.go() メソッドを使用して戻るボタンを作成する
ブラウザの特定のページに戻りたい場合は、history.go() メソッドを使用します。この組み込みの JavaScript メソッドは、閲覧履歴の特定のページに移動するようにブラウザに指示します。
括弧内に数字を入れることで、特定の履歴を与えることができます。これは、プログラミングで引数と呼ばれます。たとえば、括弧内の引数として番号 -1 を指定すると、ブラウザはブラウザの履歴の 1 ページに戻ります。
次のコードでは、history.back() メソッドの代わりに history.go(-1) メソッドを使用しました。この history.go(-2) のように、括弧内に引数として番号 -2 を指定することで、ブラウザに 1 ステップ以上前後に移動するように要求することもできます。
コード-HTML：
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<INPUT TYPE="button" VALUE="Go one step back" onClick="history.go(-1);">
</form>
<br>
<form>
<INPUT TYPE="button" VALUE="Go two steps back" onClick="history.go(-2);">
</form>
</body>
</html>
出力：
-method.webp)
上の画像の結果から、2つのボタンがあります。ユーザーが最初のボタンをクリックすると、ブラウザーはブラウザーの履歴の 1 ページに戻り、ユーザーが 2 番目のボタンをクリックすると、ブラウザーはブラウザーのユーザー履歴の 2 ページに戻ります。
history.back() と history.go() メソッドの主な違いは、back() は 1 ページだけ戻るのに対し、go() はページ数を前後に移動することです。現在の Web ページに関連する括弧内のパラメーターとして渡します。
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn