JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのonclickでブラウザを前のページに戻す方法

ボタンをクリックしたときに前のページへ戻るようにするには、JavaScriptの window.history.go(-1) を使用します。これはブラウザの履歴を1つ前に遡る動作で、いわゆる「戻る」ボタンと同じ挙動を実現できます。

実装例

以下は、input要素のonclick属性に window.history.go(-1) を指定したシンプルなサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<input action="gotoPreviousPage" onclick="window.history.go(-1);
return false;" type="submit"
value="クリックすると前のページに戻ります...." />
<script>
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存し、ファイルを右クリックします。その後、VS Codeエディターで「Open with Live Server」を選択してください。

出力結果

このプログラムを実行すると、以下のような画面が表示されます。

JavaScriptのonclickでブラウザを前のページに戻す方法

「クリックすると前のページに戻ります....」というボタンをクリックすると、下のスクリーンショットのように前のページへ移動します。

JavaScriptのonclickでブラウザを前のページに戻す方法

補足：historyオブジェクトについて

window.history はブラウザのセッション履歴を操作できるオブジェクトです。go(-1) の引数は移動する履歴の数を表しており、-1 なら1つ前、-2 なら2つ前のページへ移動します。また、より簡潔に書きたい場合は window.history.back() を使うことも可能です。どちらも同じ結果になりますので、用途や好みに応じて使い分けるとよいでしょう。

  1. 【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法

    はじめにWebページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。例えば、次のようなボタンがあるとします。<button onclick="displayingMessageOnButtonClick()">押してください</button>このボタンがクリックされた際に、指定した関数を呼び出すことが目的です。コード例以下がその完全なサンプルコードです。<!DOCTYPE html> <h

  2. JavaScriptでWebページのvideoタグ（動画）を非表示にする方法

    はじめに Webページに、次のようなサンプルのvideoタグが設置されている場面を想定してみましょう。 <video class="hideVideo" width="350" height="255" controls> <source src="" id="unique_video_id"> こちらでは動画を再生できません...... </video> Webページ上の動画を非表示にしたい場合は、yourVariableName.style