HTMLバックリンク JavaScript 解説
HTML バックリンクの作り方を日本語で解説
HTMLバックリンクとは、ウェブサイト上のページから別のページへのリンクを指します。このリンクをクリックすると、元のページに戻るための機能が提供されます。JavaScriptを利用して、HTMLバックリンクを実装する方法を解説します。
HTMLファイルの作成
まず、HTMLファイルを作成します。例えば、index.htmlという名前で作成しましょう。
<!DOCTYPE html>
<html>
<head>
<title>HTMLバックリンクの例</title>
</head>
<body>
<h1>ページA</h1>
<p>これはページAです。</p>
<a href="pageB.html">ページBへ</a>
</body>
</html>
ページBのHTMLファイルの作成
次に、ページBのHTMLファイルを作成します。こちらもpageB.htmlという名前で作成します。
<!DOCTYPE html>
<html>
<head>
<title>ページB</title>
</head>
<body>
<h1>ページB</h1>
<p>これはページBです。</p>
<a href="javascript:history.back()">戻る</a>
</body>
</html>
JavaScriptによるバックリンクの実装
ページBのHTMLファイルで、<a>タグのhref属性にjavascript:history.back()を指定しています。これは、JavaScriptのhistoryオブジェクトのback()メソッドを呼び出し、ブラウザの履歴を1つ戻すことを意味します。
ブラウザでの確認
両方のHTMLファイルを保存し、ブラウザでindex.htmlを開きます。ページAからページBへのリンクをクリックすると、ページBが表示されます。ページBの「戻る」リンクをクリックすると、ページAに戻ることができます。
要点
- この方法により、HTMLバックリンクを実装することができます。
href属性にjavascript:history.back()を指定することで、JavaScriptのhistoryオブジェクトを使用してブラウザの履歴を戻します。- HTMLの
<a>タグを使用して、リンクを作成します。
HTMLバックリンクの例とJavaScript解説
例1: シンプルなHTMLバックリンク
<!DOCTYPE html>
<html>
<head>
<title>ページA</title>
</head>
<body>
<h1>ページA</h1>
<p>これはページAです。</p>
<a href="pageB.html">ページBへ</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ページB</title>
</head>
<body>
<h1>ページB</h1>
<p>これはページBです。</p>
<a href="javascript:history.back()">戻る</a>
</body>
</html>
- ページB
「戻る」リンクをクリックすると、ページAに戻ります。 - ページA
「ページBへ」というリンクをクリックすると、ページBに移動します。
例2: JavaScript関数を使用したバックリンク
<!DOCTYPE html>
<html>
<head>
<title>ページA</title>
</head>
<body>
<h1>ページA</h1>
<p>これはページAです。</p>
<a href="javascript:goBack()">ページBへ</a>
<script>
function goBack() {
history.back();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ページB</title>
</head>
<body>
<h1>ページB</h1>
<p>これはページBです。</p>
<a href="javascript:history.back()">戻る</a>
</body>
</html>
- ページA
「ページBへ」というリンクをクリックすると、goBack()関数が呼び出され、ページBに移動します。
JavaScript解説
- JavaScript関数
複数のリンクで同じ処理を行う場合に便利です。 - history.back()
ブラウザの履歴を1つ戻します。
HTMLバックリンクの代替方法
HTMLバックリンクは、JavaScriptのhistory.back()メソッドを使用して実装することが一般的ですが、他にもいくつかの代替方法があります。
HTML5の履歴 API
HTML5の履歴 APIを使用することで、より柔軟な履歴操作が可能になります。
history.pushState(null, null, '/previous-page');
このコードは、現在のページの履歴に新しい状態を追加し、URLを/previous-pageに変更します。その後、ユーザーが「戻る」ボタンをクリックすると、この状態に戻ることができます。
サーバーサイドでのリダイレクト
サーバーサイドのスクリプト（PHP、Pythonなど）を使用して、リダイレクトを行うこともできます。
header('Location: /previous-page');
exit;
このコードは、ブラウザに/previous-pageへのリダイレクトを指示します。
リンクのhref属性に直接URLを指定
最もシンプルな方法は、リンクのhref属性に直接前のページのURLを指定することです。
<a href="/previous-page">戻る</a>
ただし、この方法では、ページの構造やURLが変更された場合にリンクが壊れる可能性があります。
JavaScriptのlocation.hrefプロパティ
JavaScriptのlocation.hrefプロパティを使用して、現在のページのURLを変更することもできます。
location.href = '/previous-page';
ブラウザの履歴を直接操作
ブラウザの履歴を直接操作することも可能ですが、この方法は一般的には推奨されません。
これらの代替方法の選択は、プロジェクトの要件や開発者の好みによって異なります。
注意
- リンクの
href属性に直接URLを指定する場合、リンクが壊れる可能性があります。 - サーバーサイドでのリダイレクトは、ページの遷移がスムーズでない場合があります。
- HTML5の履歴 APIは、すべてのブラウザでサポートされているわけではありません。
javascript html hyperlink
